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.
Scaling according to the viewport height.
So to answer the first part of your question, CSS3 offers the units vw (view width) and vh (view height). The VW and VH units measure the width and height of the viewport. For an example, 30vh is the equivalent of 30 percent of the height of the viewport. There's also vmin and vmax, where vmin is equal to the smaller and vmax is equal to the larger of the two.
For an example, if you wanted to make a div element fill up the entire viewport,
div {
width: 100vw;
height: 100vh;
}
In the past, people would have used height: 30% to make an element take up thirty percent of the height of the viewport, but the problem is that using height: 30% would only make the element take up thirty percent of its parent element. For this reason, it isn't as effective.
Simplifying the #media queries.
If you really need twelve break points in your web page to ensure it looks as it should on all devices, I'd argue that you're doing something wrong. The whole point of responsive web design is to avoid having to style your web page differently for each screen resolution and aspect ratio. Hopefully, using things like the vw and vh units will help you avoid needing to create that many separate layouts. To my knowledge, there really isn't a way to simplify those #media queries (correct me if I'm wrong).
You can also set #media queries for height:
#media screen and ( max-height: 600px ){
background: blue;
}
see this question for reference.
Related
While doing html markup I faced with the following problem: media queries triggers on visible browser viewport, not on browser window resolution. Css media-queries doesn't count the browser panel and
vertical scrollbar.
I want the content block to fit into user's first screen on (min-width: 1366px) media query. But the browser thinks that I have 1349x656 resolution and media query trigger only for (min-width: 1280px).
So how to consider visible browser viewport if all browsers have different panels and scrollbar widths?
You need to specify max-width.
replace
#media screen and (min-width: 1024px)
width
#media screen and (min-width: 1024px) and (max-width: 1365.98px)
#media only screen and (min-width: 320px), (min-width: 360px), (min-width: 375px), (min-width: 600px){
some CSS
}
Please describe your problem in the description, and not only in the title.
But your problem is that you are only using min-width. So as long as the screen is MINIMUM the width you have set in your media-query, the code will be shown. And basically all screens are minimum 320px wide, so you need to add a max-width.
EDIT:
To describe your media query, it says:
If the screen is a screen and minimum 320px wide
OR minimum 360px wide
OR minimum 375px wide
OR minimum 600px wide
If you insert a max-width in one of those, the others will still apply.
So to create a media query that applies between 320px and 768px you can either do:
#media(max-width: 768px){}
This will also get screens below 320px, but there are basically none of those.
Or you could write:
#media(min-width:320px) and (max-width:768px){}
This will only target the screens that are minimum 320px wide and up to a maximum of 768px wide.
Basically what you are doing in this code
#media only screen and (min-width: 320px), (min-width: 360px), (min-width: 375px), (min-width: 600px){
some CSS
}
is that:
#media only screen and (min-width: 320px){
some CSS
}
As above answered you need to cut this behaviour with or a max-width or overwrite the desired mediq query
#media only screen and (min-width: 600px){
new css
}
Maybe you should read some documentation about media querys and also about mobile/desktop first.
I'm using CSS #media to adjust my website depending on the screen resolution
Whether i switch to a resolution with the height of 768 or 720 it will still act as if i'm my screen resolution has a height of 720px
.group-container{
min-width:1210px;
max-width:70000px;
width:1210px;
margin-left:2.5%;
height:87%;
margin-top:1%;
}
#media only screen and (max-height: 768px) {
.group-container{
margin-top:150px;
}
}
#media only screen and (max-height: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
For the first media query you should use also a min-height set to 720px and max-height set to 768px
And if you try to use (max-width: ...px) instead?
#media only screen and (max-width: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
This way you won't rely on your height, but the width of the window it's being displayed on. example:
your resolution is 900x1600.
Resizing the height of the window wouldn't have much effect. If you where to use max-width, that way if you resize to 600x1200 for example, it would have more effect.
EDIT: The reason why I think you should use is, the height doesn't really matter when it comes to responsive design. The height might change but it will always be scrollable, so using the height will have little to no effect.
The width of the device DOES matter, the width is important when it comes to responsive design (assuming your website isn't horizontally scrollable). It would be better to create query's based on the width of the display, then to rely on height for that matter.
our site is not responsive, and one of the requirement is to render the images on mobile devices so they fit the screen and we are running into a problem, becasue different sized images are uploaded to a web page
And this is what our CSS code looks like
#media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: 214px !important;
}
}
So this works fine for 600 X 400 images, because the aspect ratio is the same. However, when we have a different size images, say 400X578, the above CSS code won't work and the images look really stretched and distorted.
What is a good solution here, since I am no front end Dev.
Any help is appreciated.
Thanks
Modify your CSS to the following:
#media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: auto;
}
}
This will allow you to specify the width of the image and the height will automatically adjust itself proportional to the width.
Is there a pure css way to make images fit in a row across a container with variable size?
I have a row of images I want to fit.
There are 2 ways I know of to fit images in a row. If I set the image width as a percent ie, width: 20%, then if the screen is wide then the images becomes very large or if the display is small the images becomes very small. If I set the images as absolute width ie, width: 100px;, then the images are shown with the size I want it to. But the container isn't totally filled and there's unseemly left over space at the right.
Right now I'm using javascript to adjust the percentage width based on the user screen width.
Is there a pure css method of controlling the way that images are shown, such that if the screen is wide more images fit into a row rather than blowing them up but still ensuring that all the images fit snuggly into the container with no left over space.
you can add float property to each of your image container (float: left). see http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
I'm using media queries like this:
#media all and (max-width: 900px) and (min-width: 600px)
img
width 50%
#media all and (max-width: 1050px) and (min-width: 900px)
img
width 33.3333%
#media all and (max-width: 1280px) and (min-width: 1050px)
img
width 25%
#media all and (max-width: 1910px) and (min-width: 1600px)
img
width 16.6667%
I think there's a better answer.