Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
ive created three media queries on my stylesheet. the first two are alright but the last one isnt. id like to know why?
#media screen and (min-width: 50px) and (max-width: 600px){..styles..}
#media screen and (min-width: 600px) and (max-width: 800px){..styles..}
#media screen and (min-width: 800px) and (max-width: 1000px){..styles..}
I'm going to guess because your queries overlap.
should be:
#media screen and (min-width: 50px) and (max-width: 600px){..styles..}
#media screen and (min-width: 601px) and (max-width: 800px){..styles..}
#media screen and (min-width: 801px) and (max-width: 1000px){..styles..}
EDIT: Also, the first min-width:50px and last max-width:1000px are unnecessary. Unless you have a screen size smaller than 50px, which I can't imagine, or you have another query beyond 1000px.
In fact, you could remove the entire first query and just keep the second and third. It would accomplish the same thing.
Related
I am really confused as to what the Media Query breakpoints should be. The way I am use to doing it is having one pixel less than the next break point, for instance
#media screen and (max-width: 749px) {} //Mobile design CSS applies to everything until 74ppx
#media screen and (min-width: 750px) and (max-width: 969px) {}
etc.
But some people use the exact values such as
#media screen and (max-width: 750px) {}
#media screen and (min-width: 750px) and (max-width: 970px) {}
Wouldn't the second approach break it? My understanding is the first approach is the way to go.
And what about if you do something such as
#media screen and (max-width: 750px) {}
#media screen and (max-width: 970px) {}
And I want all the mobile designs to apply to 750, but at 750 is where the tablet view starts. Same for 970. In this case would having it also one pixel less be correct? I.e max-width: 749 and max-width: 969
Yes, the first one is correct. In the second one, if the screens is exactly 750px wide, both media query sections will apply, which can cause problems.
Concerning your addition:
#media screen and (max-width: 750px) {}
#media screen and (max-width: 970px) {}
In this case the rules in the second query will overwrite those with identical CSS selectors in the first one, which will probably also cause problems.
The usual way would either be the other way round (desktop first approach), or using a mobile-first approach where you first state the general rules for mobile sizes, and then add media queries for larger sizes which overwrite the general rules. That would for example be
#media screen and (min-width: 720px) {}
#media screen and (min-width: 1280px) {}
This question already has an answer here:
not (max-width: 512px) not working
(1 answer)
Closed 6 years ago.
I use http://www.w3.org/TR/css3-mediaqueries/ to have different design depending on the available viewport.
In order for my search-and-replace to work, for every time I decide to adjust the cut-off points, I'd like to clearly negate #media (min-width: 500px), which intersects on (max-width: 500px), and, therefore, has to be manually negated as (max-width: 499px) instead, which then breaks search-and-replace.
I've tried not (min-width: 500px), but it doesn't seem to work at all. Is there a way to negate #media (min-width: 500px), such that the negative query will still have 500px in it, for my search-and-replace to work?
Try this
#media not all and (min-width: 500px) {
//selectors
}
You may also try depending upon your needs,
#media not screen and (device-width:500px)
This doesn't work
not (min-width: 500px) {}
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have been given a mock-up design with a header that hass a curved image (similar to http://www.smartwebby.com/images/tutorials/fireworks/website_design_fireworks/pic_header_footer.gif or http://theme-fusion.com/wp-content/uploads/2014/10/curved-header.png). at the top. The thing is it has to be fluid & responsive. I like to conceptually figure things out somewhat before I start making them. Can someone help me how I would make this responsive. If I just make it 100% width its going to be extremely distorted at some points. Any ideas?
As you guessed you can use width: 100% but then use media queries to serve a different image to different screen sizes such as:
header {
width: 100%;
}
#media only screen and (min-width : 480px) {
header {
background-image: url("/img/image-xs.png");
}
}
#media only screen and (min-width : 768px) {
header {
background-image: url("/img/image-sm.png");
}
}
#media only screen and (min-width : 992px) {
header {
background-image: url("/img/image-md.png");
}
}
#media only screen and (min-width : 1200px) {
header {
background-image: url("/img/image-lg.png");
}
}
The multiple selection of images allows you to combat the pixelation that you are afraid of. By serving an image that fits the screen best at different break points, you will keep the image quality relatively good at all sizes.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
What will be width for every devices in bootstrap 3 for responsive if I put .container max-width for large 940 px?
What will be the max-width size in media query for medium, small and extra small devices????
because I want to write media query for every devices for fixing some problem.
Please give answer with code of media query of this...
Those are the media-queries you'll find in core css. You'll have to set your custom widths in order to fix your problem.
If you need to keep proportions, try using Photoshop to scale your 940px, to smallest sizes.
Personally, even when it is okay you overwrite the largest container, I wouldn't overwrite .container for smallest devices. But it depends on you.
You'll have to add a .container and set your custom width inside each media-query.
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
.
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to be able to swap the jquery mobile CSS for a desktop "friendly" CSS. For example when a user is NOT on a mobile device display the styles in a non mobile type style. Is there a platform or existing CSS that does this?
Just change the mobile version css to looks good in desktop.
CSS3 Media Queries
Some Examples:
Max Width -
If the viewing area is smaller than 600px.
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
Min Width -
The following CSS will apply if the viewing area is greater than 900px.
#media screen and (min-width: 900px) {
.class {
background: #666;
}
}
Multiple Media Queries -
Combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
#media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width
The code will apply if the max-device-width is 480px (ex. iPhone display)
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
Link to a separate stylesheet:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />