Skip to content
Submitted over 4 years ago

Responsive Landing Page using Slight JS for Window Width Detection

David Sumnerā€¢195
@Sumner-David
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with curved sections
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Anyone have any suggestions to handle the header when it goes down to tiny mobile sizes? I found making a whole dropdown unneeded since it is only a single button.

Also any suggestions to make the on click styling for buttons nicer would be appreciated :)

Community feedback

  • Emmilie Estabilloā€¢5,540
    @emestabilloPosted over 4 years ago

    Hi DPSumner, for your header, try to bring down the size of the logo, let's say height: 1rem. You can do the same for the button until you get the size that you like. Then for the parent div .header, try justify-content: space-between and maybe reduce the left and right padding to half.

    For the buttons, what I did with my project was to make the hover state the same as the regular state of the header button (white background, pink outline and text). I was thinking it would be more in line with the design. Here is my take if you'd like to take a quick look. Just my two cents :-) Hope this helps!

    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