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.
Related
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 8 days ago.
Improve this question
What are the difference between these:
#media (max-width: 100px) { /* CSS Rules */ }
#media screen (max-width: 100px) { /* CSS Rules */ }
#media screen and (max-width: 100px) { /* CSS Rules */ }
#media only screen and (max-width: 100px) { /* CSS Rules */ }
#media only screen (max-width: 100px) { /* CSS Rules */ }
Thank you! :)
The only difference between these examples is the syntax.
#media (max-width: 100px) { /* CSS Rules */ } - this is a basic media query that checks the maximum width of the screen. Since no media type is specified it defaults to screen.
#media screen (max-width: 100px) { /* CSS Rules */ } - this media query is similar to the first one, but it explicitly specifies the media type as screen.
#media screen and (max-width: 100px) { /* CSS Rules */ } - this is the same as the second example - the and is implied in the prior case but explicitly set here.
#media only screen and (max-width: 100px) { /* CSS Rules */ } - this media query is the most specific and recommended syntax. It uses the only keyword to hide the media query from older, incompatible browsers, and it explicitly specifies the media type as screen.
#media only screen (max-width: 100px) { /* CSS Rules */ } - this is similar to the fourth example, but it does not use the and keyword explicitly.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have created a website that should only be viewed in Landscape mode on tablets.
Using CSS, is there a way to hide the website and display an image / text if the user loads the website in Portrait mode?
Thank you in advance for your help,
ZeBobo
Yes, You can use CSS Media queries.
MDN Docs
Code is copied from MDN docs. This explains on how to use the landscape and portrait orientations.
body {
display: flex;
}
div {
background: yellow;
}
#media (orientation: landscape) {
body {
flex-direction: row;
}
}
#media (orientation: portrait) {
body {
flex-direction: column;
}
}
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
Be careful while using this. There's no actual compatibility list provided.
You can use media queries:
#media screen and (orientation:portrait) { … }
#media screen and (orientation:landscape) { … }
Inside you can specify what to show, i.e. the text information on how to view the page.
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.
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
I am trying to get the #media search to work but with not success. I am using the following code but the only image I can displayed is the headernew.jpg never the headerold.jpg so it seams that none of the media queries are working. I have tested on a 27in iMac and a iPad but both display the same background image. Any help would be appreciated.
Thanks Roger
position: absolute;
top: 0;
left:-50%;
width: 1344px;
height: 150px;
background-image: url('../img/headernew.jpg');
/* Only affects 1600px width */
#media only screen and (min-width : 1600px){ background-image: url('../img/headerold.jpg');}
/* Only affects 1200px width */
#media only screen and (max-width : 1200px){ background-image: url('../img/headerold.jpg');}
/* Only affects 900px width */
#media only screen and (max-width : 900px){ background-image: url('../img/headerold.jpg');}
/* Only affects 600px width */
#media only screen and (max-width: 600px){ background-image: url('../img/headerold.jpg');}
/* Only affects 400px width */
#media only screen and (max-width: 400px){ background-image: url('../img/headerold.jpg');}
background-repeat: no-repeat;
background-position: center center;
Your format is wrong, and I don't see any selectors in your code, which should look something like this:
#yourID {
background-image: url('../img/headernew.jpg');
}
#media only screen and (max-width : 900px) {
#yourID {
background-image: url('../img/headerold.jpg');
}
}
It looks like you were trying to put the media queries inside the selector block, but instead the query must wrap the selectors and rules you want to use.
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" />