I wrote a specific style for min-width:769px and max-width:899px in media query, but I want to this same specific style to this range min-width:401px and max-width:768px how to do this?
I want to change width of the element at screen size of #media (min-width:769px) and (max-width:899px), even this width have to apply #media (min-width:401px) and (max-width:768px), but the condition is don't want to change min-width and max-width pixels, how can implement this?
We have 2 media queries in hand.
#media(min-width:769px) and (max-width:899px){.class_name{}}
#media(min-width:401px) and (max-width:768px){.class_name{}}
We can combine both these scenarios as like below
#media(min-width:401px) and (max-width:899px){.class_name{ width: your_value}}
Related
Is it possible to hide a div with (or without) Bootstrap 4 if the screen width is over/under a specific value? Does it need javascript for that?
More specifically, I'm looking for hiding a specific text (that I find useless on a mobile screen). I tried classes like "hidden-sm-up" but I couldn't make it work. Sorry if it's a basic question...
media queries in CSS are what you are looking for.
.mydiv{display:block; /*default behavior*/}
#media only screen and (max-width: 400px) {
.mydiv{display:none; /*hide div on all screens with 700 and lower width*/}
}
(try dragging the divider between js and outpuut block)
https://jsfiddle.net/qaabhmou/
more you can find here:
https://www.w3schools.com/css/css3_mediaqueries.asp
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Can anyone tell me if I can set a "infinite" max-width for doing responsive web design?
Currently I have
#media screen and (max-width: 5000px) { }
But what if one day screen resolution is bigger than 5000?
You could set it to max-width: none; (Initial value) if you want, otherwise just don't set it.
Just remove that clause entirely.
If you don't want a maximum, don't set a maximum.
Actually, just include the default attributes in the class and then those values will change on resize, so no need to have a separate setting for unlimited.
So using the following code with template I can set when responsive mode kicks in.
#media all and (max-width: 680px)
However is there a query that if the browser width goes below for ex. 380px responsive, items stop minimizing etc. and stay at what would appear at 380px responsive only. So if someone was minimizing browser or had viewport of 280 they would be viewing what it looks like at 380px responsive but with scroll bars?
Any help would be appreciated.
Thanks.
You could simply set a min-width on the body element.
Example Here
body {
min-width:380px;
}
Bootstrap doesn't offer that level of control but you can simple add the following media query and then impose styles on elements on screen sizes smaller than 380px wide.
#media all and (max-width: 379px) {
// Style elements specifically for screen sizes less than 380px
}
This question is similar to CSS media queries: max-width OR max-height, but since my rep isn't high enough, I can't add a comment (question) to the reply and I want to add to the original question.
Like the poster in the other topic, I have media queries with certain specifications for DIVs.
#media only screen and (min-width:460px){
.center{width:250px;}
}
#media only screen and (min-width:960px){
.center{width:350px;)
}
Now, I want the center DIV to be 250px wide when the screen is 960px wide, but only 400px high. If I'd set the first media-query to this:
#media only screen and (min-width:460px), screen and (max-height:400px){
.center{width:250px;}
}
which query will my browser use?
Will the min-height overrule the min-width? Or will it skip the min-height and go to the min-width query (960px)?
I've used Stack Overflow alot to find answers, but haven't posted any question so if this is incomplete, please let me know.
-edit-
I entered the wrong condition (min-height instead of max-height)
it will use ALL of them as soon as the condition matches. so the rule used for .center would be the last one being defined (as usual in css, later definitions override the early ones)
But as I understand what you want to do with your query, wouldn't it be more like
#media only screen and (min-width:460px) and (max-height:400px){
.center{width:250px;}
}
i hope to understand what u really need, but for join two rules i use this syntax, and this work for me:
#media only screen and (min-width:460px), (max-height:400px){
.center{width:250px;}
}
I know that #media can be used to detect properties of the whole viewport, and then switch among CSS rule sets based on different types of media/widths, etc ..
But how does one switch between CSS rules based on the width of parent div, etc ?
This code preview shows the footer of my page, with some elements changed/removed:
Liveweave: http://liveweave.com/JtUxpF (Switch to Split V or View mode from the top menu)
On the right side of the footer, there is a small form (marked with the red arrow in the picture above). This form has a #media separation applied to it, like so:
#media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
#media not all and (min-width: 270px) {
/* Apply second set of CSS rules */
}
Problem:
My idea was to actually apply CSS rules based on the width available to the form from the parent div. However the CSS rules are currently applied based on the width of the screen/viewport.
If you reduce your window's width to less than 270 pixels, you'll see the visual change in the form's look!
So how can I choose and apply between two different sets of CSS rules, based on the width available to the form, instead of the viewport width itself ?
Not possible in pure css. The equivalents of "if" statements in css is currently limited to media queries and selectors, neither of which get you what you need. You can use something like less or sass to do what you're trying to do, or you can generate rules dynamically using a server-side or javascript approach.
sass: http://sass-lang.com/
less: http://lesscss.org
There is some support for math in css (calc()), but no ability to use those as conditional clauses.