Skip to content
Submitted about 4 years ago

Landing page with HTML and CSS

Abhishek•60
@Abhishek1438
A solution to the Huddle landing page with a single introductory section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I had just started web dev and I have one doubt that is it any other simpler way to change text size with screen size or we need to use media querry 2-3 times always and please give feedback on my code.

Code

Please log in to post a comment

Log in

Community feedback

  • John Rey Faciolan•220
    @juani2

    Hello Abhishek1438,

    Good day!

    that specific topic is what I'm practicing lately.

    Yes you can eliminate media queries in your text size by using css clamp() together with vw units.

    if for example your font size at 375 pixel should be 16px but on desktop it should be 18px, you can do font-size: clamp(16px, 4.26667vw,18px)

    that way your font size will grow from 16px upto 18 px depending on the viewport width.

    I have solutions where I used this method. You may look at my code here:

    Meet Landing Page https://www.frontendmentor.io/solutions/responsive-design-using-clamp-min-and-calc-in-vanilla-css-fz82PaTRT

    Clipboard Landing Page: https://www.frontendmentor.io/solutions/responsive-fonts-and-spacing-vanilla-css-using-sass-5YNak8g2h

    Hope it helps.

    Thanks.

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