Skip to content
Submitted about 4 years ago

Huddle landing page with a single introductory section USING pure CSS

Beshoy S.•460
@BeshoyS
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

Hi guys, i have a problem with responsive design which i don't know which units to use to not make a big messy code.

Can anyone help me to understand it?

Code

Please log in to post a comment

Log in

Community feedback

  • John Rey Faciolan•220
    @juani2

    Hello Beshoy.

    Your doing great!

    About your concern on responsive units, and responsive design in general, I would like to share you this link: https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

    it really helped me reduce my media query codes especially when dealing with responsive typography and spacing.

    you can also check my Clipboard Landing Page solution. I've Implemented a responsive font without using media queries. Here's the link:

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

    I hope it helps.. :)

  • LouiseCW•235
    @costelloeward

    Hi Beshoy,

    Looking good so far!

    When I did this I was advised to go mobile first. So I wrote the CSS for the smaller screen first, then had one min-width query at the end. This meant all the styling for the larger screen was in one place.

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