I designed a responsive website but now the client wants me to lock the width of the site until new changes are implemented.
When I lock the width of the container the media queries are still responding to the size of the browser screen and not the container size.
Is there a way to lock the browser viewport for desktop so that it only recognized the smaller size and uses those media queries?
My site is responsive but I want it locked to 1024px. When I do that but view it on a larger screen width it doesn't pick up the 1024px media query styles...
Well the obvious solution would be to comment out the other media queries, remembering to also comment out the media query declaration for the 1024px view. For example:
/*
...
#media ... {
...
}
#media screen and (max-width: 1024px) {
*/
elem {
...
}
/*
}
*/
$('body').css('width','1024px'); with jquery
Related
My apologies for writing so much but I wanted to put what I’m doing into context. So I’ll ask my question first:
Why does the HTML and CSS this link to a responsive navbar stop working when I change its “max-width” media queries to “min-width”, pixel-based media queries?
https://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/#nav
All I need is to understand why I can’t make the HTML and CSS behave exactly the same way with min-width, pixel-based media queries. What do I not get? I’ve been working with Responsive web design and development for a few years. But this clearly proves I don’t understand responsive css the way I need to. I’m coding up a responsive website from scratch for a client of my own without Bootstrap so I can hard-wire my understanding on the principles that Ethan Marcotte sets out in the second edition of Responsive Web Design.
I’m not trying to be lazy by not posting my own code. This is the exact same structure navbar I want to use for the site I’m building, and you can go straight to the relevant HTML and CSS in the above link. I’ve tried making a linked stylesheet of the embedded CSS and HTML in the above link. I’ve injected it into my own site as a separate linked-stylesheet but I’m still running into the same brick wall.
My breakpoints structure in my own stylesheet is:
`/* ====MOBILE FIRST===== */
/* Custom, iPhone Retina */
#media only screen and (min-width: 320 px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width: 480 px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width: 768 px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width: 1024 px) {
}
/* Desktop */
#media only screen and (min-width: 1280 px) {
}`
I also don’t want to have one big monster stylesheet, so I’m trying to link the navbar stylesheet to the main stylesheet, using:
`#import url('mainstyles.css');`
I know that essential css rules for breakpoints must go into specific media queries. But if all the CSS in the above navbar link have to go into all five “min-width” based media queries - that’s just CSS bloat - isn’t it? And too much unnecessary CSS code?
I’ve spent three days on it and I just can’t get the fundamental reason. How do I make the above nav bar BEHAVE EXACTLY THE SAME WAY after changing the “max-width” media queries to “min-width” pixel-based media queries? I’ve tried changing the “width” and all style rules relevant to display to percentages - but it’s not solving the fundamental reason. Many thanks in advance for all advice.
Keith :)
max-width means the query will work up UNTIL the specified width.
min-width means the query will START working at the specified width.
Your first query will work from 320px to 479px. Your second will work from 480px to 767px, and so on (you have no query for 0-319px).
In order to change max-width to min-width you'd need to bump each query down a level (XS would become min-width: 320px, Desktop would become min-width: 1024, etc.)
I've included a simple answer below, as I found, once you get the basics right with Media Queries, its an easy concept to then apply to more complex ideas...
The example below could be used for firstly, a smartphone, then going up to an iPad, then finally a landscape iPad and a desktop device...
#media screen and (max-width: 600px) {
/* Stylings for all devices with screens with a width of 600px or less.*/
}
#media screen and (max-width: 992px) {
/* all screens with a max width of 992px or less */
}
#media screen and (min-width: 992px) {
/* all screens with a width of 992px or higher */
}
I read the iPhone 6/7 (S or not) has a browser width of 375px.
However, I am writing a simple #media query like this:
#media only screen and (max-width : 375px) {
....
}
I found out that is not working until I increase the max-width to exactly 980px.
Why is that?
How can I make a #media query that treats the phone like it has 375px? I don't care how dense is the screen resolution, it is a small phone and I want to apply a phoney web design, without destroying the design for devices like tablets or small laptops with around 1000px resolution.
Ideally it should work with col-xs-X bootstrap's styles.
There is definitely another media query or default style overriding this.
Your media query is correct, but ALWAYS MAKE SURE that your media query is at the very end of your style.css file (Or whatever the name is).
I'm trying to do my first project with media queries, and I'm facing a strange issue.
I started to develop for mobile, using this media query:
#media screen and (max-width:479px) {}
Then, I develop for larger mobile devices with:
#media screen and (min-width:480px) and (max-width:600px) {}
Then for small tablets:
#media screen and (min-width:601px) and (max-width:720px) {}
And larger tablets:
#media screen and (min-width:721px) and (max-width:980px)
Then for laptop:
#media screen and (min-width:981px) {}
Everything works fine so far, but now I'm doing this media query #media screen and (min-width:1200px) {} for larger laptops, and when I resize the browser up to 1200, and If I don't have nothing inside this media query, my content rather than stay unformatted, what happens is that my content catches the previous media query: #media screen and (min-width:981px) {}.
Is this is normal?? If one media query doesn't have CSS formatting, the content catches another media query?
If there is nothing inside a media query, then the browser doesn't need to change anything.
Since anything that is at least 1200px (min-width:1200px) is necessarily also at least 981px (min-width:981px), anything that applies in the latter will apply in the former if nothing is changed. In a way, you could say that the browser "catches" the earlier media query, but it really is catching both; there is just nothing in the second to override the first so the styles remain the same.
This is expected behavior.
The reason why your mobile and tablet media queries don't apply on laptops (and desktops) is because you have specified max-width, unlike your laptop media query, which only has a min-width condition.
Is there a way to tell bootstrap to not shrink the elements when the resolution is smaller than:
/* Portrait tablet to landscape and desktop */.
#media (min-width: 768px) and (max-width: 979px) { ... }
I want to support the large desktops and tablets screen, but nothing responsive below that resolution.
Adding the min-width property wont stop the grid system from messing up though, as the classes span1-12 will still become smaller when resizing!
An option is visit http://twitter.github.com/bootstrap/customize.html and untick "Narrow tablets and below (<767px)" on the responsive section, then download your custom bootstrap.
You can remove media query code of mobile screen in bootstrap.css
I did two steps
set less variable #screen-sm-min: 10px. This will stop all bootstrap's media query
And just set min-width to the top element.
Works for me
You can add the css property min-width on all the elements you want not to be shrunk.
I have two divs that are floating next to each other. What i would like is to have it have a width of 100px when you are looking at it in portrait mode and lets say 200 px in landscape. This happens viewing on a mobile device actually.
So the div will expand when in landscape mode and shrink up a bit in portrait.
Any ideas?
Well this is not possible with CSS2, but it would be possible to do what you want with Javascript (read out the screen size etc.).
I'm not sure what technology you are looking into, but CSS3 provides exactly what you want with CSS3 Media Queries.
With CSS3 you have fun stuff like this (or you could even specify width e.g. 200px):
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles here */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles here */
}
Check out this example page for more explanation, or this one.
EDIT Just because I found this page today: Hardbroiled CSS3 Media Queries - very good writeup.
You can do this by using the css media feature "orientation". This way you can specify styles depending on screen orientation, unrelated from screen size. You can find the official w3.org definition about this media feature here. Combined with the specifications on developer.mozilla.org this will explain how it works.
Quote from w3.org about the ‘orientation’ media feature:
The ‘orientation’ media feature is ‘portrait’ when the value of the
‘height’ media feature is greater than or equal to the value of the
‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
A note/quote from developer.mozilla.org about the "orientation" feature:
Note: This value (ie portrait or landscape) does not correspond to actual device orientation.
Opening the soft keyboard on most devices in portrait orientation will
cause the viewport to become wider than it is tall, thereby causing
the browser to use landscape styles instead of portrait.
So to reiterate, it is not actually the screen orientation that triggers portrait or landscape media queries. However it is the ratio between height and width of the screen! Because of this it also makes sense to use the "orientation feature" with non mobile/tactile devices hence I've added a small demo to show the behaviour of these media queries.
JSFIDDLE DEMO (try resizing the view port)
Here are the representative media queries affecting portrait and landscape orientation.
#media screen and (orientation:portrait) {
/* Portrait styles */
/*set width to 100px */
}
#media screen and (orientation:landscape) {
/* Landscape styles */
/* set width to 200px*/
}