Vertical Responsiveness

[akinhwan]

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.

[processprocess]

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.

[Author]

Posts