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.
Related
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}}
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.
I'd like to buy a license of cssSlider at www.cssslider.com, but I need to get it to work first.
I want a responsive full-width slider. As the browser window decreases in width, I want to keep the slider height intact at first (so only the sides of the slider image will be cut). After a certain breakpoint (when browser window has same width as the width of the content wrapper on my site), only then do I want the slider to get smaller vertically as well. This way, the slider won't get ridiculously thin on smaller devices. I hope I explain myself well.
I managed to do this on my site with a single image used as background, using a transparent .gif with a width of 1120 x 500:
https://www.easterisland.travel/
I know it's possible with cssSlider, since they have this feature on their first page top slider (http://cssslider.com/), but there's no option to choose this with the cssSlider executable program.
Any clues? Thank you!
For smaller screens, they set the container height to auto inside a media query. Then they appear to serve different images based on screen width. So it looks like 'responsive images'.
Responsive images can be complicated depending on whether you care about IE, your server configuration, and whether you know php or javascript, etc etc. Here's some info: https://css-tricks.com/which-responsive-images-solution-should-you-use/
Alternative solution: you could use the newer css3 units of vw and vh.
vw and vh are percentage of the viewport. The browser support for this will be roughly equal to the support for css3 sliders, so you should be ok!
Try replacing their media query, something like this:
#media only screen and (max-width: 800px) {
.csslider1, .csslider1 > ul {
height: 75vh; max-height:450px;
}
}
In the end, I found this to be the correct code:
#media only screen and (max-width: 1500px) {
.csslider1,
.csslider1 > ul {
height: auto;
}
}
I found the cssSlider program to automatically generate the behaviour I was looking for with the right settings. All you need to do is to put the breakpoint you want as image width, with "Full width" checked.
Hello there I have been trying to figure out how to set up a fixed width container for the extra small device size in Bootstrap 3. I know that there is settings out of the box for this size that are auto to be responsive to the smallest devices however, I have been assigned to make a design that has mobile fixed size around 320px wide and centered before it bumps up to the next media query size (#screen-sm-min).
I have tried calling out the container size to change in the media queries but it does not seem to work.
Thank you for any suggestions!
Should work if you create a media query for max width just below #screen-sm-min
#media (max-width: 767px) {
.container {
width: 320px;
}
}
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;}
}