Menu
I'm using css media queries on my website to switch to a more vertical layout on smaller devices. This works quite well, but I'd like to add a button on the site with something like "Show desktop version". I want to make this button (or link, whatever) force or alter the media query evaluations so they evaluate as if the screen width was bigger than it is (e.g. 1200px instead of 320px). Is this possible?
My css looks like this:
#logo {
/* Mobile style */
[...]
@media (min-width: @screen-sm) {
/* Desktop style */
[...]
}
}
#footer {
/* Mobile style */
[...]
@media (min-width: @screen-sm) {
/* Desktop style */
[...]
}
}
/* And so on... i.e. multiple piecewise styles, following the same pattern used in Bootstrap's css */
I found this interesting approach which uses a css class on the body instead of media queries to switch between layouts. However, it completely does away with the actual media queries and uses javascript instead. "Full web" mobile browsers and screen-size media queries based
Refined the css example. The first 2 answers are very helpful, but I'd rather not have to completely modify the css organization to separate at the root desktop and mobile versions. One more interesting technique: LESS: Can you group a CSS selector with a media query?
An interesting approach is to modify the css media queries via javascript. It scares me a bit though because browser support might be unreliable for an such an obscure technique: http://jonhiggins.co.uk/words/max-device-width/
328
To override a specific media query rule, append a new css rule after the one you want to override. For example, if the last css rule does not have a media query attached, it will override all previously declared media queries (presuming the same selectors).
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
Solutions with CSS To hide an element in a responsive layout, we need to use the CSS display property set to its "none" value along with the @media rule. The content of the second <p> element having a "hidden-mobile" class will be hidden on devices smaller than 767px.
CSS declared inline This may be the reason why your media queries aren't working. That is to say, you may have declared CSS within your HTML document. So if this is the case, simply go through the HTML document and remove the CSS declared inline. Alternatively, you can override the inline CSS with !
There is a bit of redundancy with this method, but a selector has higher specificity its properties have precedence even if a media query matches. For example:
.container, .full-site.container {
/* full site styles */
}
@media (max-width: 395px) {
.container {
/* mobile styles */
}
}
When full site is clicked, add the .full-site class and the full site styles will apply even on devices with a 395 pixel width.
http://jsfiddle.net/7ZW9y/
112
Two possible implementations comes to mind: 1) segregate your media queries into a separate stylesheet, 2) prepend a specific class to all the selectors inside a media query.
Put all of the media queries you are seeking to remove (using the "Show desktop version" button) into a separate stylesheet (e.g., "mobile.css"):
<link rel="stylesheet" type="text/css" href="normal.css" />
<link rel="stylesheet" id="mobileStyle" type="text/css" href="mobile.css" />
You can then remove this element using jQuery (e.g., $('#mobileStyle').remove()). Removing the element referencing the stylesheet will remove all the styles defined in the stylesheet.
Keep everything in a single stylesheet but prepend all media-queried selectors with a single class. For example, you could add a .mobile-ready class to the <body> and then:
@media (min-width: ... AND max-width: ...) {
.mobile-ready header{
}
.mobile-ready footer{
}
.mobile-ready ...{
}
}
With your "Show desktop version" button, remove the .mobile-ready class from your <body>, which will remove all the styles encompassed by the class. Writing CSS in this manner is easy with LESS or Sass.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
