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;}
}
Related
On the docs page of mini.css https://minicss.org/docs#modal-dialogs , there's a modal dialog example. It works, and everything's fine, just the size (width to be precise) of the dialog seems to be constant, regardless of the screen size. It's very short, even on quite wide screens. Is there a way to make it wider (e.g. to take 70% of available space)?
Perhaps the problem is trivial, yet I'm not a CSS expert. I've checked the size of div elements, and they are set to 100%. Just the modal part is rendered so small.
It is using a media query , Override that media query.
media screen and (min-width: 320px)
.card {
max-width: 70%; //try !important tag if does not work without it.
}
Or probably define your own media queries.
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
When I resize the screen of the browser on Google Chrome (I haven't tried on another browser) the value shown is wrong. It makes my work harder when I have to use a media query. I can't find any answers about it. Even if the issue is restricted to Chrome, I would like to know why this happens.
Doesn't match with
#media screen and (max-width: 1067px) {
//do something
}
for example.
EDIT: When I resize the screen to see if my layout broke at a certain width and pick the width shown to use in my media query the query doesnt run at that browser width, but if i put something like 200px more it works but i lose precision.
Using the previous example:
Suppose that is not google site, is my site, and on this width (1067px)I need to center a div.
If I try:
#media screen and (max-width: 1067px) {
margin: 0 auto;
}
It wont work at the specified value (1067px), but if I put something like max-width: 1267px will work but losing precision.
I dont know exactly how much in px is the variation but is around 200px.
The example of center a div is only an example, the fact is: Nothing specified on the query at 1067px work, if I decrease further will work, but too late, forcing me to increase the 1067px to 1267px to run when I want.
IMPORTANT: I have not tried other browsers besides Chrome.
#media screen and (max-width: 1067px) {
//do something
}
I didn't understand your problem well I guess, but I will explain how #media works.
If your screen has from 0 to 1067 width it will work with the css inside this #media screen. It doesn't mean it will limit your screen to some value, you must setup your page to work with max-width of 1067px.
Like this(using max-width on div's and other elements):
<div id="home>
//content
</div>
And your css would be like this:
#home
{
max-width: 1067px;
}
Hope that Helps!
I'm trying to change the height of the Twitter feed module you can see here. The layout was done by the vendor we're using for our WCMS, so the CSS is proving a little difficult to navigate. I resized the iFrame for the feed so that it spans two rows, but now when it resizes for phones and tablets it overlaps the "Spotlight" article below it. Here's the CSS. Any help is much appreciated!
Instead of clearing your floats with an extra div using clear:both it's best to get in the practice of clearing your floats in the parent container using overflow:hidden
The interim fix for the problem your having with your twitter iFrame overlapping your "spotlight" article is due to line 3568 in app.css where the max-height is specified. Removing that should fix the issue.
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
Or maybe doing a media query to specify max-height:auto for that element when in tablet or mobile form.
#media only screen and (min-width: 64.063em) {
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
}
The reason you are facing this issue is because the article tag which wraps the iframe has a CSS property max-height:320px attached to it. Due to this, when you view in the mobile view, the article tag does not expand beyond 320px. As the width is also being decreased in the mobile view, the 320px height limitation causes the content to overlap rather than flow below it.
What you can do is override the 320px max height limit with something like this in your media query :
.home-content-modules-row .content-module {
max-height: 1000px;
}
Hope this helps!!!
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.