I have made some css to select the appropriate image for a device. However i don't know why it keeps displaying a bg970.png image on my retina mac pro 15 inch.
<style>
/* default screen, non-retina */
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
body{
background: url("img/bg970.png") no-repeat fixed; }
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
body{ background: url("img/bg970.png") no-repeat fixed; }
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
body{ background: url("img/bg970.png") no-repeat fixed; }
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
body{ background: url("img/bg970.png") no-repeat fixed; }
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
body{ background: url("img/bg970.png") no-repeat fixed; }
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
body{ background: url("img/bg970.png") no-repeat fixed; }
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
body{ background: url("img/bg1224.png") no-repeat fixed; }
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
body{ background: url("img/bg1824.png") no-repeat fixed; }
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
body{ background: url("img/bg970.png") no-repeat fixed; }
}
</style>
Your last statement is:
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
body{ background: url("img/bg970.png") no-repeat fixed; }
}
but that seems to apply to any retina device, including your mac pro.
Related
I've finally worked my website on mobile phones, landscape and portrait, but I still am not being able to work it on tablets!
I've used media queries to make my website work on mobile phones, here's what I did:
#media screen and (max-width: 1024px) {
body{
position: relative;
left: 100px;
}
.pintro{
position: relative;
top: 180px;
width: 500px;
}
.hintro{
position: relative;
top: 180px;
}
/* The rest of my code */
}
#media screen and (max-width: 1024px) and (max-height: 400px) {
body{
font-family: 'Noto Sans', sans-serif;
background: url("nature-blur-tree-greenex.jpg") no-repeat center center fixed;
width: 100%;
max-width: 900px;
margin: 0 auto;
position: relative;
right: 8%;
}
.pintro{
position: relative;
line-height: 50px;
left: -100px;
}
/* The rest of my code */
}
I then tried doing that with tablets, in this form:
#media only screen and (min-device-width: 768px){
.footer{
position: reltive;
top: 1000px;
}
}
But, that didn't work. I would be very grateful if someone provided me with a media query which I can put in my CSS for my site to work on tablets.
Thanks.
try using this codepen
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPhone 6 landscape */
#media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 Plus landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 Plus portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 and 6 Plus */
#media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
/* Apple Watch */
#media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }
I created a website that is mostly responsive, but it needed a little help when viewed on smaller screens. I tried to add an #media query to the css page, but it doesn't seem to be making any difference.
I only added different style rules in my main css page, and did not add anything to my html. I am confused on how media queries work exactly, so maybe that's my problem?
Here is my css
/*Alt styles for smaller screens*/
#media only screen and (max-width: 780px) {
div.price-area1 {
width: 100%;
text-align: center;
}
div.price-area2 {
width: 100%;
text-align: center;
}
div.price-area3 {
width: 100%;
}
input.submit {
width: 60%;
margin-left: 20%;
}
nav {
width: 100%;
}
nav ul li {
position: relative;
float: left;
width: 50%;
font-family: 'Poiret One', cursive;
margin-bottom: 15px;
text-align: center;
font-size: 24px;
}
}
The easiest way to understand media queries is to read about it here and here:
With that said, you may want to use a framework such as bootstrap which is a great way to start a site. Otherwise you can use this template for media queries:
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
}
This is a good starting point if you want to do it all yourself.
Hi I'm having a small media queries problem. The logo on the website I am working on does not resize when on mobile devices. So I've tried to add the code below but it doesn't do anything. Is there a way to set it up so that it works on mobile devices as well?
link : http://eyeandretina.com.au/
.header_left a img
{
float: left;
margin-right: 20px;
width:612px;
}
media {
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.header_left a img {
width:100px;
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */ .header_left a img {
width:100px;
}
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */ .header_left a img {
width:100px;
}
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */ .header_left a img {
width:100%;
}
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */ .header_left a img {
width:100%;
}
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */ .header_left a img {
width:100px;
}
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */ .header_left a img {
width:100%;
}
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */ .header_left a img {
width:100px;
}
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
.header_left a img {
width:100px;
}
}
just go through your website link and I found
your this css is not calling
http://eyeandretina.com.au/wp-content/themes/medicenter/style/responsive.css?ver=4.1
this css is overwriting you current css.
try to do your all code in this responsive.css or make your style.css as a prioroty
http://eyeandretina.com.au/wp-content/themes/medicenter/style.css?ver=4.1
I want to keep different background image for mobile version.I applied media queries but still its not taking.
CSS:
#banner{
margin:0 0 0 0;
padding:0 0 0 0;
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-position:center;
position:absolute;
width:100%;
height:2816px;
}
#media (max-width: 480px) {
#banner{
background-image:url(images/cooper.png);
/*display:none; Doesnt shows anything*/
}
}
Any suggestions?
Its not working because you have not given size for bg-images as well as div#banner :
working fiddle
div, html, body {
width:100%;
height:100%;
}
#banner {
margin:0 0 0 0;
padding:0 0 0 0;
background-image:url(http://www.mpa-garching.mpg.de/galform/cr/CR_TCDM_dump40_400_170000_12000_100_blue.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
position:absolute;
width:100%; /* u have set this here, so this is fine */
height:2816px;
}
#media only screen and (max-width: 480px) {
#banner {
width:100%; /* u have no set this here, so this is not working for you */
height:100%;/* u have no set this here, so this is not working for you */
background: red url('http://bingbangstudios.com/press/fork/fork_pixie_400x400.jpg');
background-size:100% 100%; /* notice this here too*/
/*display:none; Doesnt shows anything*/
}
}
Try this meta tag and media queries..
<header>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</header>
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
You don't need too much coding. Just code as follow-
#banner{
margin:0 0 0 0;
padding:0 0 0 0;
background-repeat:no-repeat;
background-position:center;
position:absolute;
width:100%;
height:2816px;
}
#media (min-width: 480px) {
#banner{
background-image:url(images/bg.jpg);
}
}
#media (max-width: 480px) {
#banner{
background-image:url(images/cooper.png);
}
}
Wondering why it is so difficult to position divs to remain responsive.. they just float where ever they want for some reason.. how can I position these perfectly? Holding their positions while resizing like my social icons http://www.closetvip.com/splash.html
/* Menu Buttons */
#english {
float:right;
position:absolute;
right:570px;
bottom:101px;
clear:right;
}
#spanish {
position:absolute;
left:570px;
bottom:100px;
clear:right;
}
<div id="spanish">
<img src="img/espanol.png">
</div>
<div id="english">
<img src="img/english.png">
</div>
You need to use position: relative; on the parent div of absolute div's otherwise the items are absolute of the window
you have to control this by media queries or use % in your css rule
like
#spanish {
position:absolute;
left:47%;
bottom:20%;
clear:right;
}
Note: this is not final just an example
These are some standard media queries from chris coyier
reference url
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
use these and set position of your elements for all devices
I don't see the use of bootstrap what so ever, only that it's inclued to the header and that is it...
You are position your element with fixed pixels on right/left and that is taken from the window border, so when you resize your window it's normal that the elements are pushed.
Your social icons are positioned with right 0 so it's normal to stay always at the right when you resize your window, but the 2 other buttons have 570px and they will always keep that space, so when you resize you know what is happening.
The Solution you ask?
You can position them with:
#spanish { bottom: 100px; clear: right; left: 50%; margin-left: -150px; position: absolute;}
#english { bottom: 101px; clear: right; float: right; left: 50%; margin-left: 50px; position: absolute;}