The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertical Responsiveness

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #254486

    I am using bootstrap and have a responsive page width-wise, but am also trying to make it vertically responsive. This page will ultimately end up as a sort of widget, so that the user can resize it into any sort of width and height combination. Generally what I’ve seen researching online have been responsive-width related, or if they talk about height media queries it is only for a portion of all the elements that constitute the page.

    I find that having breakpoints in bootstrap helps, but almost wish there was a 12-row grid system as well for vertical breakpoints. Not all layouts will look good when constrained for height, especially when what I am trying to do won’t have any vertical scrollbars either.

    It also feels redundant to target height media queries in conjunction with certain widths when I already have (min-width & max-width) media queries. Because if I just made (min-height & max-height) media queries then it would crop content that was too wide.

    Starting from a 16:9 aspect ratio and 1920x1080px resolution, I have broken it up into 12 breakpoints. 3, 6, 9 ratio heights and 4, 8, 12, 16 ratio widths.

    @media (min-width: 480px) and (min-height: 360px){}
    @media (min-width: 480px) and (min-height: 720px){}
    @media (min-width: 480px) and (min-height: 1080px){}
    @media (min-width: 960px) and (min-height: 360px){}
    @media (min-width: 960px) and (min-height: 720px){}
    @media (min-width: 960px) and (min-height: 1080px){}
    @media (min-width: 1440px) and (min-height: 360px){}
    @media (min-width: 1440px) and (min-height: 720px){}
    @media (min-width: 1440px) and (min-height: 1080px){}
    @media (min-width: 1920px) and (min-height: 360px){}
    @media (min-width: 1920px) and (min-height: 720px){}
    @media (min-width: 1920px) and (min-height: 1080px){}

    Basically I’m asking if there is a better or easier way of doing this. Because currently it seems like I’m having to use a lot of custom breakpoints, and that I’ll be inserting a lot of styles in each query to adjust the layouts for each screen size.


    Hey akinhwan,

    The best advice I received for responsive design is “let the content dictate your breaks”.
    I only use them if my content is looking unreadable, or if the styling is looking unintentional.

    I don’t have a technical answer to this, however If I could see a reduced Codepen I’ll be happy to give it a shot.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.