Im wondering if it's possible to use the element.style at a certain media query.
Im working inside an application where a divs width is set by javascript on document load. Like this:
<ul style="width: 593.531px;" class="width-fix">
<style>
.width-fix {
width:100%!important;
min-width:100%;
}
</style>
What I would like is that a certain break point just fallback to the element.style.
Should I use jquery to toggle this or can it be done with a media query?
You could write it in the "reverse" way.
#media screen and (min-width: ###px) {
.width-fix {
width:100%!important;
min-width:100%;
}
}
This media query will only be active when the window is above a certain width. Meaning that when you fall under it, the !important rule will be removed and the inline css will kick in.
Related
Need to change class in CSS for a DIV based on different screen sizes
<div id="tab" class="tab_small"></div>
I need to change class of DIV having ID "tab" to "tab_small","tab_medium" & "tab_large"
based on the screen size using css only
#media(max-width:450px){tab_small class will apply}
#media(min-width:450px) and (max-width:768px){tab_medium will apply}
#media(min-width:768px) and (max-width:990px){tab_large will apply}
Is that doable?
with JS I can do, Is there a way to do with CSS in bootstrap?
If all three classes will be there in HTML on that DIV, is there a way to display one out of them in html based on screen sizes?
Thanks in advance!
I think you are trying to achieve a behavior like this. Try to resize the fiddle window. Please be aware that setting a property within #tab selector will override the #media queries, if you want to prevent this behavior just use #tab .tab_small, #tab .tab_medium, #tab .tab_large selectors inside the #media queries.
#tab{
width: 200px;
height: 200px;
}
#media(max-width:450px){
.tab_small{
background:red;
}
}
#media(min-width:450px) and (max-width:768px){
.tab_medium{
background: green;
}
}
#media(min-width:768px) and (max-width:990px){
.tab_large{
background: blue;
}
}
Fiddle Demo
There is not way to change DOM property value using CSS. There is only way to achieve this using javascript.
Try this jQuery js solution, probably this will resolve your issue..
<div id="tab" class=""></div>
<script type="text/javascript">
if($('body').width() < 450){
$('#tab').addClass('tab_small');
}else if($('body').width() > 450 && $('body').width() < 768){
$('#tab').addClass('tab_medium');
}else{
$('#tab').addClass('tab_large');
}
</script>
I have written media queries in this order. But some of my html code is not working, which does not have any relation with this media queries. A html button disabled in responsive view. But after deleting the media queries it is working fine. I have checked the code, all the brackets are closed properly. Is there any strict rule that should follow while writing media queries?
#media all and (max-width:1200px) {
}
#media all and (max-width:992px) {
}
#media all and (max-width:768px) {
}
#media all and (max-width:480px) {
}
#media all and (max-width:320px) {
}
Some possibilities
If you have absolute positioning to button, you can try removing it
Position button according to device width in responsive view
Check if another div or element is overlapping button
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
So I'm using two media queries on my page:
<link rel="stylesheet" media="screen and (max-device-width: 1099px)" href="./src/css/narrow.css" />
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="./src/css/main.css" />
The main.css one loads by default, but when the browser is re-sized below 1100px, it simply loads no stylesheet, therefor the entire page renders no styling.
Anybody have any clue what I'm doing wrong? Also, isn't it possible to use media queries inside of "main.css"? So I can only alter certain elemnts based on browser width, instead of loading a whole new stylesheet? Thanks much guys :)
Yep you can do this all in the main stylesheet, so something like this:
#media only screen and (max-width: 1099px){
/* css here */
}
#media only screen and (min-width: 1100px){
/* css here */
}
Actually I also noticed you had max-device-width: on so this will only target ipads/iphones etc which is probably why you weren't seeing this stylesheet on the desktop
The alternative is to use Javascript/Jquery to detect the screen size and load a different stylesheet based on that screen size, but Adam's solution is probably better unless you need to separate your style sheets for a particular reason.
This article will give you all the information you need using jquery - http://css-tricks.com/resolution-specific-stylesheets/
You can also use multiple queries - I make a new one every time I fine a width that doesn't look quite right.
#media (max-width:319px) {
// styles
}
#media (min-width:320px) and (max-width:479px) {
// styles
}
#media (min-width:480px) and (max-width:479px) {
//styles
}
etc..., etc...
I'll also usually built the queries on each element that needs them. I find that when you put ALL your rules for the a media query in one section of your stylesheet things get confusing to maintain.
For example:
div.box {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...
Then on another element that needs resizing I'll do the same thing:
div.otherbox {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...