Ok, so I'm using Bootstrap 3 for one of my websites.
Everything works great, but there's something wrong with the #media query to define some css for smaller devices.
So I've included all the necessary files of bootstrap (first the bootstrap css & then my own, the js,...)
In my css I have for example:
#media (max-width: 768px) {
.md-only {
display:none;
}
.item-left {
padding:0px;
}
}
.item-left {
padding:10px;
}
So what now happens is that when I add class="md-only" in my html the div (for example) doesn't show up on devices < 768px. However, the div with class="item-left" still uses the padding:10px and not the padding:0px as defined in the #media query. So it takes one css class, but not the rest.
I don't get what I'm doing wrong...
The problem is the order of your rules.
Try placing the .item-left before the #media.
.item-left{padding:10px;}
#media screen and (max-width: 768px){
.md-only{display:none;}
.item-left{padding:0px;}
}
<div class="md-only"></div>
<div class="item-left">qweqwe</div>
Make sure you are not overriding your styles. As you can see in your example, you've added the class .item-left a second time after defining it in the media query earlier thus making it obsolete.
.item-left {
padding: 10px;
}
#media (max-width: 768px) {
.md-only {
display: none;
}
.item-left {
padding: 0px;
}
}
Related
Why does nothing I do on my CSS style sheet work?
I have the following code which displays a placeholder div when on a desktop screen and to disappear when it's displayed on a mobile/tablet screen.
#media only screen and (min-width: 940px) {
.image_placeholder {
display: block;
}
}
.image_placeholder {
display: none;
}
<div class="image_placeholder">
This is an image placeholder
</div>
Why can't I get this to work: Set the .image_placeholder with css todisplay:none; when the screen width is below 920px and set it to display:block; when it is at 920px or above.
Why does the .image_placeholder disappear regardless as to whether the screen is above or below the 920px threshold?
Assuming the missing . in front of the second image_placeholder isn't there in the actual code:
CSS rules, when selectors are of equal specificity, are applied in order.
So, if the media query applies:
.image_placeholder { display:block; }
.image_placeholder { display:none; }
So it gets none.
If the media query doesn't apply, then you just have:
.image_placeholder { display:none; }
So it gets none.
Order matters.
If you want the media query rules to override the non-media query rules then put the media query last.
You should write the media query after the main CSS.
.image_placeholder {
display: none;
}
#media only screen and (min-width: 940px) {
.image_placeholder {
display: block;
}
}
<div class="image_placeholder">
This is an image placeholder
</div>
Edit:
An example code with image would be like this -
.image_placeholder {
display: none;
}
#media only screen and (min-width: 940px) {
.image_placeholder {
display: block;
}
}
<div class="image_placeholder">
<img src="https://via.placeholder.com/500x500.jpg">
</div>
<p>This is sample text to test that the placeholder image div leaves no white space in mobile resolution.</p>
You should add full stop . in-front of class name like .image_placeholder.
I've got a problem which I have no idea how to get around of.
I use a shop script where I can only edit CSS file.
I have a div with background-image and in there I have a normal image:
<style type="text/css">
.someclassforcss img{
some:attributes;
}
.someclassforcss {
background-image:url(/link.png);
}
</style>
<div class="someclassforcss">
<img src="/link2.png">
</div>
Everything's good, but I want to use media queries (or any other method) to hide background-image of div for mobile devices, but I have no idea how to make it, because media queries doesn't work for specific attributes, only for whole elements, so if I would've hided the div, my img is also hided which i don't want.
You DO can change attribute regarding media dimensions.
Your CSS:
.someclassforcss {
background-image:url(/link.png);
}
#media screen and (max-width: 762px){
.someclassforcss {
background-image: none;
}
}
Try this:
#media only screen and (max-width: 767px){
.someclassforcss {
background: none;
}
}
You can hide the div with a media query. eg:
#media (max-width: 600px) {
.someclassforcss {
display: none;
}
}
or if you just want to remove the background image:
#media (max-width: 600px) {
.someclassforcss {
background-url: none;
}
}
Is there a way to create a media query for one size only?
#media(min-width: 484px) {
img {
display: none;
}
}
The example above shows the image will disappear starting at 484px on. Is there a way to write a media query where the image will only disappear at 484px and reappear at 485px without adding another media query?
Also, is there a way to write a media query to do something between two sizes without writing 2 - 3 media queries?
I was wondering if there is a way to write both of these on one line.
why not just
#media (width:484px) { ... }
?
That is to say:
#media(width: 484px) {
img {
display: none;
}
}
Mozilla's documentation for media-query media-features
You can chain media queries:
To hide the image for 484px only:
#media (min-width: 484px) and (max-width: 484px) {
img {
display: none;
}
}
Update
#DaMaxContent provided a better solution.
Just use width instead of both min-width and max-width.
#media (width: 484px) {
img {
display: none;
}
}
You should do like the following code:
CSS:
#media(min-width: 484px) and (max-width: 484px) {
img {
display: none;
}
}
It will hide only at the defined pixels.
Hope it helps you.
I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.
jsfiddle
What I want to do is set the div #add2any to this for small screens.
<div id="add2any" class="a2a_kit a2a_default_style">
Otherwise I want this:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Is this possible, and how?
Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.
Background
The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.
CSS so far
#media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Unable to find solution from any of these, I'm using foundation framework.
conditional CSS based upon div not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure javascript in html
**Edit 2 **
Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.
Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.
Edited
If you have this html:
<div class="a2a_kit a2a_default_style">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
You can make a media query like this:
/* first state */
.a2a_kit { display: block; }
.a2a_kit.a2a_kit_size_32 { display: none; }
#media screen and (max-height: 430px) {
/* reverse behaviour on max-height 430 px */
.a2a_kit { display: none; }
.a2a_kit.a2a_kit_size_32 { display: block; }
}
You just need to set up modified styles in your media queries:
#add2any {
/* any styles you want to apply all the time */
background-color: blue;
width: 100px;
color: white;
}
#media (min-width: 420px) and (max-width: 760px) {
/* styles when screen is greater than 420px wide but less than 760px */
/* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
#div1 {
background-color: red;
width: 300px;
color: yellow;
}
}
#media (min-width: 760px) {
/* styles when screen is greater than 760px wide */
#div1 {
background-color: green;
width: 600px;
}
}
JSFiddle Demo
*if you don't want to style based on the ID, you can add a unique class and style that
I am looking for how to remove specific images with media queries. I am using HTML/CSS for a webpage.
Here is the code I currently have, which does not work (it was experimental):
#media (min-width:0px) and (max-width:1200px) {
LEVEL 1.png, level 6.png, http://placehold.it/160x600, http://placehold.it/100x100 {
display:none;
}
}
Any suggestions would be great, thanks.
Just give the images a class and then in the media query:
.that-class-name {
display: none;
}
Also, you should probably remove min-width: 0. I'm wondering if something less than 1200px would be better for for max-width as well. That's very wide.
Here you have to add a class inside the your media query
#media (min-width:0px) and (max-width:1200px)
.img { display: none; margin: 0 auto;} // your image class or can be img tag
}
and just now i answered the same question Here