Here's the style.css where I've implement media queries:
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Large desktop */
#media (min-width: 1200px)
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px)
body {
background: #b5ebf9 !important;
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px)
body {
background: #b5ebf9 !important;
}
/* Landscape phones and down */
#media (max-width: 480px)
body {
background: #b5ebf9 !important;
}
And I've added this in the HTML, for it to detect (I think this is right):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And obviously, linked to the above CSS file in the header.
But for some reason, the background image ALWAYS displays, instead of the colour #b5ebf9.
What am I doing wrong?! I've spent 1-2 days on and off trying to fix this! I tried...
Making separate CSS sheets for each device , linking to those style sheets with the media tag included (no reaction whatsoever)
Also tried removing the first body query from the above CSS - which just keeps the backgrounds in that color, across all devices, no background image at all! (I want the background image to show up on desktop screens.)
Please help!
You need those {} to regroup media queries:
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Large desktop */
#media (min-width: 1200px){
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
body {
background: #b5ebf9 !important;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px){
body {
background: #b5ebf9 !important;
}
}
/* Landscape phones and down */
#media (max-width: 480px){
body {
background: #b5ebf9 !important;
}
}
Can you try this:
#media only screen and (max-width: 979px) and (min-width:768px) {}
#media only screen and (max-width: 767px) and (min-width:481px) {}
instead of just #meadia
Related
I'm using latest wordpress and builduppro themes.
Currently, I use logo size 90px for desktop, tablet and mobile.
I want logo size 90px for desktop only.
How can I decrease logo size into 60px(30%) for tablet and 40px(50%) for mobile?
website : http://logo.ayumall.com
I'm not a programmer and can't find any WP plugin to solve this problem.
Will appreciate any feedback.
I just edited on style.css but no luck.
#media screen and (max-width:768px)
{
.logo
{padding-top: 10px !important; text-align: left !important;}
}
Currently my Responsive.css :
/* Mobile Portrait View */
#media screen and (max-width:767px) {
.logo{ width:auto; float:none; text-align:center; padding:0;}}
/* Tablet View */
#media screen and (min-width:768px) and (max-width: 980px){
.logo{ float:none; text-align:left; width:auto;}}
#media screen and (max-width:1169px) and (min-width:981px) {
.logo{ float:left; width:auto}}
#media screen and (max-width: 980px){
.logo img{ height:auto;}}
the opening bracket is missing in your code after ".logo"
#media screen and (max-width:768px)
{
.logo
{
padding-top: 10px !important; text-align: left !important;}
}
Checked your website.
You can achieve this by CSS. Put the following code in your stylesheet.
/* For Tablets */
#media screen and (max-width: 768px){
.logo img{height: 60px;}
}
/* For Mobile */
#media screen and (max-width: 480px){
.logo img{height: 40px;}
}
Make sure to remove your cache after making these changes to css.
Hope it helps.
I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first #media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost
Your help is greatly appreciated
Thanks
#media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
#media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
#media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
#media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE
}
First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.
Here is an example.
/* Large desktop */
#media only screen and (min-width :75.000em) {
.test {
display: none;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :61.250em) and (max-width:74.938em) {
.test {
display: block;
color: #FF0;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :48.000em) and (max-width:61.188em) {
.test {
display: none;
}
}
/* Landscape phone to portrait tablet */
#media only screen and (min-width :30.063em) and ( max-width :47.938em) {
.test {
display: none;
}
}
/* portrait phones and down */
#media only screen and (max-width :30.000em) {
.test {
display: block;
color: #FF0;
}
}
<meta name="viewport" content="width=device-width initial-scale=1" />
Include above code into html to run media query.
You need to set your first one to say "anything smaller than (max-width: 829px), do this"
For EG:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
#media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}
See it in effect at this Plunker - I added the bg class to the body so you can see the background change color when you change the frame width.
You can simplify your queries too by saying:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px){
.bg {background-color:red;}
}
#media (min-width: 1026px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) {
.bg {background-color:yellow;}
}
I'm trying to have 3 different logo sizes (small, med, big) based on different screen sizes. Here's my code:
#media screen and (max-width: 487px) {
.site-header .site-branding {
background-image: url("../images/logo_small.png") !important;
}
}
#media screen and (max-width: 1079px) {
.site-header .site-branding {
background-image: url("../images/logo_med.png") !important;
}
}
#media screen and (min-width: 1080px) {
.site-header .site-branding {
background-image: url("../images/logo_big.png") !important;
}
}
This works swapping from big to med, but it won't swap again from med to small. Why?
Try to use the min-width on the second media query also. Even when the screen is small the second query is true and the last css gets preference so its loading the second query image.
Make the following change.
#media screen and (max-width: 487px) {
.site-header .site-branding {
background-image: url("../images/logo_small.png") !important;
}
}
#media screen and (min-width: 487px) and (max-width: 1079px) {
.site-header .site-branding {
background-image: url("../images/logo_med.png") !important;
}
}
#media screen and (min-width: 1080px) {
.site-header .site-branding {
background-image: url("../images/logo_big.png") !important;
}
}
You can order it like this:
CSS:
#media screen and (min-width: 1080px) {
.site-header .site-branding {
background-image: url("../images/logo_big.png") !important;
background: blue;
}
}
#media screen and (max-width: 1079px) {
.site-header .site-branding {
background-image: url("../images/logo_med.png") !important;
background: green;
}
}
#media screen and (max-width: 487px) {
.site-header .site-branding {
background-image: url("../images/logo_small.png") !important;
background: red;
}
}
DEMO HERE
See: http://css-tricks.com/logic-in-media-queries/ under 'Overriding'.
I think what is happening is both the first and second media queries are true, so the second one is overriding the first; thus, never reaching the point to switch to small.
Solution: move the first media query to be the final one... should fix it and adjust accordingly.
Background image does not resize on different desktop screens with the following style. What's wrong here?
#media
only screen and (min-resolution: 2dppx) and (min-device-width: 539px) {
/* Large screen, retina */
.welcome {
background:#00ff00;
/* link to other image */
background-image: url('Desktop768px1024px.jpg');
background-size: 100% 100%;
/* hide src */
height:0;
width:0;
/* just show the background */
padding:768px 1024px;
}
}
Try use this rule:
#media only screen and (min-resolution: 72dpi) and (min-device-width: 539px) {}
Of late, I've been designing sites that are more responsive and I've been using CSS media queries frequently. One pattern I noticed is that the order in which the media queries are defined actually matters. I didn't test it in every single browser, but just on Chrome. Is there an explanation for this behaviour? Sometimes it gets frustrating when your site doesn't work as it should and you are unsure if it's the query or the order in which the query is written.
Here's an example:
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two">Contact us</div>
</body>
CSS:
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
However, If I wrote the query for 1024x600 in the last, the browser would ignore it and apply the margin value specified in the starting of the CSS (margin-top:2em).
/* Media Queries - Re-arranged version */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
If my understanding of media queries are correct, the order shouldn't matter, but it seems it does. What could be the reason?
That's by design of CSS — Cascading Style Sheet.
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).
So, given this CSS
#media (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
if the browser window is 350 pixels wide, the background will be blue, while with this CSS
#media (max-width: 400px) {
body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.
Finally, with
#media (max-width: 400px) {
body {
background: blue !important;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
or
#media (max-width: 400px) {
html > body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
the background will be blue (with a 350 pixels wide window).
Or you could just add min-width to the bigger media query/ies and not have any issues, regardless of the order.
#media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
Using this code, in any order, the background-color will always be red for resolutions with a width of 400.1px-600px, and will always be blue for resolutions with a width of 400px or less.