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)
Related
#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 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.
I am making a parallax site using http://keithclark.co.uk/articles/pure-css-parallax-websites/.
I have finished it all and looks great, but if i resize my screen window all items inside go over each other. My question now is how can i make a responsive that 'deletes' the paralax when the screen size is about an ipad size or smaller. So that i have 'normal' pages.
Just wrap your code with a #media query, e. g.:
#media (min-width: 700px) {
// your code
}
Then this code will only apply on a screen with a min-width: 700px.
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.
I am new to coding and I have created a website with lots of margin and padding values. So is there a logical way to make it responsive?
Margin and padding shouldn't really matter when it comes to making a responsive site. To make a site responsive, one of the big things is working on making the site width's into percentages. Also, finding a good framework can help a lot. I would suggest looking into bootstrap or foundation.
http://getbootstrap.com/css/#overview
You need to apply new margins and paddings inside Bootstrap breakpoints.
Pick only the one you need.
Some tips how to reduce amount of responsive code:
Group elements which resize in the same way with one classname, then apply new sizes only for the group of the same classname.
Apply responsive size for columns, like col-xs-12, col-sm-6, col-md-4
Don't re-style all elements for every breakpoint, if you don't have to. Check if a website is looking good on a big screen, then resize browser and restyle only this elements which break on a smaller screen.
Reduce the number of breakpoints to minimum, for example: 1. mobile devies, 2. tablets, 3. desktops.
css:
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}