Skip to content
Submitted over 3 years ago

Responsive Design Using Vanilla CSS' clamp(), min(), and calc().

John Rey Faciolan•220
@juani2
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

My Last Newbie level solution for HTML/CSS only challenge.

For the responsive effects on the header, I've implemented it via background positions and a dozen trial-and-error media queries. At first, I did try to implement the "splitting" image effect as the screen grows from a smaller viewport to a wider viewport but I messed up at flexbox.

Question 1: How can I reduce my media queries in the implementation of my header section?

Question 2: I do like the idea of responsive typography, Is the use of rem on my implementation of responsive typography better than the use of pixels? or does it really matter?

Question 3: Overall, I feel like I have too many media queries. What can I do to refactor my media query code and improve the maintainability of my code?

Your feedback will be of big help. Thank you. :)

Community feedback

  • Ron Paolo Toyhacao•165
    @rontoyhacaoPosted over 3 years ago

    Hello John Rey,

    About your typography concern, it is highly encouraged that you use rems instead of pixels because pixels are absolute units, meaning they are fixed. Once the client sets to a different font size on the browser's settings, pixels simply won't follow. Also I find that using clamp() on the font size is a great idea, maybe I could use that technique as well. Btw great work, happy coding. :))

    1
    John Rey Faciolan•220
    @juani2Posted over 3 years ago

    @rontoyhacao ,

    Wow! thanks!

    In my next work, I'll try to use rems, maybe I should do another calc() to convert pixel to rem. By the way, this video encouraged me to use clamp(). https://www.youtube.com/watch?v=U9VF-4euyRo&t=448s

    0
  • Isaac Novaes•650
    @isaacnovaesPosted over 3 years ago

    Hello Juan,

    On your first main section, an extra scrollbar shows up. I think that overflow:auto; on this section container would fix it.

    Apart from that, nice work!

    0
    John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hello @Isaac-Novaes,

    May I know in what viewport width where the extra scrollbar shows up? This can be of great help. Thanks for the information.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord