I'm trying to develop a site to support Retina. I have two images: the regular size and 2x version. My code does not appear to work. I'm on Retina and everything still looks pixelated for me.
header {
background: url(../images/header.jpg) no-repeat;
float: left;
height: 301px;
width: 1000px;
}
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5)
{
.header {
background: url(../images/header_2x.jpg) no-repeat;
}
.logo {
background: url(..images/logo_2x.png);
}
}
.logo {
background: url(../images/logo.png) no-repeat;
display: block;
height: 38px;
margin: 0 auto;
margin-top: 63px;
width: 194px;
}
I'm not quite sure what I am doing wrong.
Related
I'm fairly new to the world of scripts and coding, so I do not know the best terms to use.
I am trying to make a somewhat simple website, and I want my header background to have padding-bottom 120px at min-width 600px, and 0 at 1050. However, the padding-bottom only updates when changed in the properties for header.
Here is my code:
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
.header {
padding-bottom: 0px;
}
}
The padding-bottom stays at 136px no matter the min-width of the window.
Make sure that you know the difference the dot does. .header is selection the header class. While header selects the element. Your code works fine, as you can see here, I'm using the media queries to change the background color instead of padding, just to make the point clear.
Fiddle example
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
background-color: blue;
}
}
#media screen and (min-width: 1050px) {
.header {
background-color: green;
}
}
<header class="header">
</header>
There is a small typo here. You have an additional dot(.) which will mean a class selector as against the other style which is on element selector.
#media screen and (min-width: 600px) {
header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
header {
padding-bottom: 0px;
}
}
I've been trying to add a parallax scrolling effect to a background image on my website.
I'm having problems when the browser height changes. (It will push the image up over the text.) Adding queries using min-height or max-height doesn't seem like a very elegant solution.
Do you suggest I include different sizes of the image for different media queries, or just simply alter the background size and background position?
#headerwrap {
background-color: #3F8BE0;
min-height: 1020px;
padding-top: 85px;
padding-bottom: 0;
text-align: center;
/* Parallax scrolling effect */
background-image: url("../img/globe345.png");
background-size: 800px 800px;
background-position: 50% 155%;
background-attachment: fixed;
background-repeat: no-repeat;
}
And here are the media queries I'm using:
#media (min-width: 590px) and (max-width: 767px) {
#headerwrap {
background-size: 450px 450px;
background-position: 50% 55%;
min-height: 720px;
}
}
#media (min-width: 320px) and (max-width: 589px) {
#headerwrap {
background-size: 450px 450px;
background-position: 50% 40%;
min-height: 625px;
}
}
#media (max-height: 950px) {
#headerwrap {
background-size: 450px 450px;
background-position: 50% 75%;
min-height: 710px;
}
}
Hello guys I am using the following code to show and hide some elements but it seems to doesn't work on mobile devices.
#media screen and (max-width: 768px) and (orientation : portrait) {
.drawer1 {
display: block;
top: 789px;
}
.drawer {
display: none;
}
.drawer1-content {
background: #fff;
background-repeat: no-repeat;
border-collapse: collapse;
height: 645px;
width: 100%;
}
}
#media screen and (min-width: 769px) {
.drawer {
bottom: 0px;
height: 700px;
overflow: hidden;
position: absolute;
width: 1024px;
z-index: 5;
}
.drawer1 {
display: block;
}
..from the code you posted, looks like you miss a } at the end..
Also check if your device has a width less than 768px in the first case
and it has a width more than 769px in the second case (landscape or portrait)
try one of the several extensions available on Chrome/Firefox/Opera to set the max width of the viewport and simulate a mobile device..
From the comment:
so from the specs: IPAD 3gen: 2048-by-1536 pixel....here you have your answer :D just change the max-width and min-width ..or just use the landscape and portrait attributes
My query was about my wordpress site womensfertility n hormones. c o m
if I view the site on a smaller screen with resolution like 1024 x 768
the site would look like this:
but if I view it on my normal computer screen with big resolution it looks good,
then if I scale it to iphone and ipad it would scale normal as it is responsive. I'm using optimizepress. I've just added a code to make the site boxed layout and to have a background image instead of full width. my code that I've added was:
.banner .logo img{width:200px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 100%;
}
.container {
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 75%;
}
I guess the width: 75%; and the .banner .logo img { width: 200px; } makes the site looks that way, but I have no idea how to make the site look like boxed without doing that code. Any idea?
use CSS Media Queries
#media (max-width: 600px) {
/*code for screen with max with 600px*/
}
#media (max-width: 480px) {
/*code for screen with max with 480px*/
}
or:
body { color: white; background: gray; font-size: .5in }
#media screen and (min-width: 1024px){
body { background: red; }
}
#media screen and (min-width: 641px) and (max-width: 1023px){
body { background: yellow; }
}
#media screen and (max-width: 640px){
body { background: green; }
}
for example :
#media (max-width: 480px) {
.banner .logo img{width:140px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 80%;
}
.container {
width: 35%;
}
}
I have a problem loading retina images.
I have got two imagesprites. One normal and one retina.
The problem is that I don't know how to scale down the retina image, it is now twice the size.
This is my css.
.home {
background: url('../images/buttonSprite.png') -49px -52px;
width: 43px;
height: 43px;
}
#media all and (-webkit-min-device-pixel-ratio: 2) {
.home {
background: url('../images/buttonSprite#2x.png') no-repeat -79px -113px !important;
-webkit-background-size:43px 43px;
}
}
How to solve this problem?
Try just this:
.home {
background: url('http://img580.imageshack.us/img580/9284/buttonsprite.png') no-repeat -49px -53px;
width: 43px;
height: 43px;
}
#media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-moz-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min-device-pixel-ratio: 1.5) {
.home {
background: url('http://img90.imageshack.us/img90/5624/buttonsprite2x.png') no-repeat -39px -56px;
background-size: 200px 496px;
}
}
Notice that I used a pixel-ratio of 1.5, that's pretty much a standard. I also included the other prefixes.