Skip to content
Submitted about 5 years ago

Huddle landing page with alternating feature blocks

Ayu Adiati•105
@adiati98
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

I still have trouble in setting media queries for portrait and landscape orientation when they have same screen size, let's say start from 600px.

For example, when the height of a box is 25vh (height: 25vh), it fits well in portrait mode. But within the same screen size on landscape mode, this height would be too small.

What is the better solution to fix this?

Thank you :)

Community feedback

  • Pablo•50
    @pablowbkPosted about 5 years ago

    Maybe try using vmin instead of vh, so whether it's portrait or landscape , the element should be sized propoetionally

    1
    Ayu Adiati•105
    @adiati98Posted about 5 years ago

    @pablowbk Thank you so much! I will try it 😄

    0
  • Matt Studdert•13,611
    @mattstuddertPosted about 5 years ago

    As @pablowbk mentioned, using vmin will help here 👍

    As a side note, I'd recommend avoiding setting height wherever possible, especially on elements that contain lots of children e.g. header, footer, section, etc. This is just because you can get overflow issues whereby the content inside is taller than the parent element's height.

    A good alternative strategy is to set padding on the containing element, which means the whole element will grow and shrink in size along with the content inside.

    Keep up the great work! 🙂

    0
    Matt Studdert•13,611
    @mattstuddertPosted about 5 years ago

    @adiati98 you're welcome!

    0
    Ayu Adiati•105
    @adiati98Posted about 5 years ago

    Sorry, I just saw your feedback, @mattstuddert. Thank you so much for the advice! :)

    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