I have, on a Prestashop store, a copyright paragraph that I want to dispaly on a single row for large displays and with a linebreak for smaller ones (ie. mobile).
I have created two distinct ids for two versions of the copyright text like this:
#media (max-width: 719px) {#poweredby {display: none;}}
#media (min-width: 720px) {#poweredby {text-align: center;margin: -10px 0 -13px 0;display: block;}}
#media (max-width: 719px) {#poweredby-mob {display: block;}}
#media (min-width: 720px) {#poweredby-mob {display: none!important;}}
<div id="poweredby" class="col-md-12 col-xs-12">
COPY 1 - Single line
</div>
<div id="poweredby-mob" class="col-md-12 col-xs-12">
COPY 2 - Two lines
</div>
The result though is strange:
on mobile displays only the "poweredby-mob" div is visible, like it should, but on larger ones they BOTH appear, "poweredby-mob" not getting the display:none attribute even if I added !important to it.
Any ideas why this simple media query isn't working?
Media queries can be picky about how you structure them. Try this.
#media (max-width: 719px) {
#poweredby {display: none;}
#poweredby-mob {display: block;}
}
#media (min-width: 720px) {
#poweredby {text-align: center;margin: -10px 0 -13px 0;display: block;}
#poweredby-mob {display: none!important;}
}
Another thing that can help is to choose a "default", whether that be mobile or non-mobile and set those style outside of any media queries. Then use media queries only to override when needed. That reduces the potential for human error.
Related
I have a large section of code that has a number of differences depending on if the view is mobile or desktop. I'm trying to control which section of code displays with the code shown below. Here's my jsfiddle No matter how I adjust the widths, both div's appear. Is this possible or do I need to use javascript?
<style>
#media only screen and (max-width: 600px {
div.is-not-mobile {display:none;}
div.is-mobile {display:block;}
}
#media only screen and (min-width: 600px {
div.is-not-mobile {display:block;}
div.is-mobile {display:none;}
}
</style>
<div class="is-not-mobile">
<div>This is not a mobile view</div>
</div>
<div class="is-mobile">
<div>This is a mobile view</div>
</div>
You're missing closing parenthesis ) in (max-width: 600px) and (min-width: 600px).
<style>
#media only screen and (max-width: 600px) {
div.is-not-mobile {display:none;}
div.is-mobile {display:block;}
}
#media only screen and (min-width: 600px) {
div.is-not-mobile {display:block;}
div.is-mobile {display:none;}
}
</style>
<div class="is-not-mobile">
<div>This is not a mobile view</div>
</div>
<div class="is-mobile">
<div>This is a mobile view</div>
</div>
In the given code your missing (max-width: 600px parenthesis. the correct code will be (max-width: 600px)
Also, make sure you have meta tags in your head section
Best practice try to add your media queries from internal tag to external CSS file at the end of code.
Hope this will work. Happy Coding!
my website use bootstrap 4 and a css file i made.
in the bottom of this css file, i put some media queries:
#media (max-width: 575px) {
.address .contact {
text-align: center;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { }
#media screen and (min-width:768px) and (max-width:992px){
.left{
margin-left: 0;
width: 100%;
}
.picto{
width: 40%;
}
}
And here is a part of code:
<section id="section_address" class="container">
<div class="row">
<div class="col-12 col-sm-6">
<div class="address">
<h5>ADDRESS</h5>
1 street,<br>
75000, PARIS
</div>
</div>
<div class="col-12 col-sm-6">
<div class="contact">
<h5>MYCOMPANY</h5>
01 11 22 33 44<br>
contact#mycompany.com<br>
http://mycompany.com
</div>
</div>
</div>
</section>
But my media queries are not working, except when i add !important to each line. But i can't do that for each line and i already use media queries and i never had to do that.
Bootstrap css file should be referenced before your custom css file in your html page. If not bootstrap css will Cascade or overwrite your rules.
Make sure your custom CSS added after all other CSS. Because your custom CSS should be added after all other CSS files. whereby your custom CSS will override other CSS.
Because CSS applies "top to bottom".
Thank you!!!
Most likely, the elements to which you applied your own CSS classes also have Bootstrap classes applied to them (like .row, column, col-12 and many others), and the Bootstrap CSS rules (especially those which combine several classes) have a higher specifity, which overrules your own classes.
To get the result you want, use the browser tools / inspector on those elements and look which CSS class / CSS rule / selector is applied. Then create a rule which uses the same selector (combination of classes) PLUS your own class, which will result in a higher specifity and therefore overrule the original Bootstrap rule.
Firstly, avoid using !important unless you absolutely have to, it's a maintenance hazard.
Instead, look at how you could make your rules more specific than the bootstrap ones. Inspect the DOM and look at the problematic rules, then update your selectors with reference to the specificity rules so that they take precedence.
Regarding your newly-added code:
#media (max-width: 575px) {
.address .contact {
text-align: center;
}
}
This selects for all .contact class elements as descendants of `.address' elements. This hierarchy isn't present in the pasted code.
If you want to select them both then you need a comma:
#media (max-width: 575px) {
.address, .contact {
text-align: center;
}
}
If that isn't specific enough then this almost certainly will be:
#media (max-width: 575px) {
#section_address .address, #section_address .contact {
text-align: center;
}
}
Other than that, I can't see .left or .picto anywhere.
Website I've been working on just started ignoring all media queries. I can't seem to find the problem.
http://fnd.instinctdigitalmedia.com/
On the homepage the images under the 'Browse our Products" section shoud change based on screen width. at 320px, 480px, and 768px screen width it still shows the originals.
You must target the ancestor or parent to override what the previous query has done.
From 760px to override its style rule you should add call the parent #content of the img to override the rule in 760px
Example:
#content > img {width:25%;}
}
#media screen and (max-width : 480px){
#content > img {width:50%;}
}
#media screen and (max-width : 760px){
img {width:100%;}
}
There's a few issues I can see. Firstly, media queries aren't firing because:
There's a closing parenthese missing on line 899, flipping an error. To find this, I added my own media query showing something obvious, and pasted it at the top of the CSS, then further and further down until it stopped working.
Also, the mobile view failed because you are missing 'and' in your media query:
#media only screen (min-width: 320px) and (max-width: 480px) {}
It should be:
#media only screen and (min-width: 320px) and (max-width: 480px) {
As for the width break itself, a handy trick with responsive designs is to limit this kind of issue from ever occurring before you even start styling (this is a rough guide, not a comprehensive list):
img, video, object, iframe, fieldset, table, form, article, section, header, nav, footer {
max-width:100% !important;
}
Even when respecifying the widths of your images, you are still using pixel widths instead of a relative measurement like percentages. This means the images will stay a static size and won't resize correctly to the screen no matter what.
Lastly, you are using a 'bracketed' approach for your media queries. This means rather than allowing your existing CSS to cascade down your media queries, saving you having to specify things twice that aren't going to change, you must repeat the same code many times.
For example, you currently have:
#media only screen and (min-width: 768px) and (max-width: 1024px) {
.product-cat-1 {
position: relative;
display: block;
margin: 0 auto 10px auto;
width: 430px;
height: 150px;
background-image: url('http://localhost/firstnations/wp-content/uploads/2014/04/home-lighting.jpg');
}
}
Anything below 768px must be specified all over again. This leads to massive amounts of repeated code, and a lot of extra work for you. The simpler approach would be:
#media only screen and (max-width: 1024px) {
/* all styles for under 1024px */
}
Then for anything smaller:
#media only screen and (max-width: 768px) {
/* only styles that need to change when under 768px wide */
}
I have a css code like this:
#charset "utf-8";
/* long code just an example of top */
.show_hide_top a.showLink { /* small red link */
left: 39% !important;
padding-left: 8px;
top: 15% ;
}
#media only screen and (min-width: 1300px) and (max-width:1500px) {
/* long code for these devices ex: */
.show_hide_top a.showLink {
left: 39% !important;
padding-left: 8px;
top: 18% ;
}
}
#media only screen and (min-width: 769px) and (max-width:1299px) {
code for these devices
}
#media only screen and (min-width:481px) and (max-width: 768px) {
code for these devices
}
However, my computer (1600) picks up the media code for the 1300-1500.
Something (probably silly) is wrong.
Thank you so much for your opinion.
Media queries like this don't target devices, they target the width of the browser viewport in pixels. #media only screen and (min-width: 1300px) and (max-width:1500px) was being picked up because your browser's viewport was in between 1300 pixels wide and 1500 pixels wide.
To demonstrate this idea better, try resizing your browser window and watch the different media queries being applied and removed.
When I was using media query, firefox was not recognizing a generic id like #upper.
Example:
<div id="container">
<div id='left"> content here </div>
<div id="center">
<div id="upper"> content here </div>
...
</div>
<div id="right">content here </div>
</div>
As soon as target #center #upper in the CSS, the media query worked ONLY for the target media and not as a generic rule.
Only #upper? Nope... It was reading and applying the media query for all devices, overwriting the generic CSS.
At first, toggling between min-devide-width and min-width seemed to work, but the problem persisted. So this is the permanent fix.
Make sure to use both full path in the generic CSS and in the media query.
Does anyone know why the second media query (401 to 750) is not applying?
#mydiv {color:#FF0000;}
#media screen and (max-width:400px){
#mydiv {color:#33CC33;}
}
#media screen and (min-width:401px and max-width:750px){
#mydiv {color:#000;}
}
<div id="mydiv">
testing text color with media queries
</div>
http://jsfiddle.net/xpnGh/2/
The min-width and max-width descriptors need to be in their own set of parentheses, with the and outside them similarly to when you place it between screen and the first descriptor, like so:
#media screen and (min-width: 401px) and (max-width: 750px)