[Solved] problem @media only screen

[melaniebund]

Hi
I have a problem styling ipad-pod-phone
I have a profile photo and form side by side and in i…mode would like to make the profile photo smaller and align above the form so the css below is what i created but it does not work, does not change a thing
link to site is a problem as its a user’s page

`@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
img.profile-photo{float:left; display:block;
height: 100px;
width: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
border:solid 2px #000;}
#respondprofile {
width: 100%;
margin-top: 10px;
float:left;
clear:both; display:block;
}}
…

original site css

…
img.profile-photo{
height: 180px;
width: 180px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
border:solid 2px #000;
float:right;
}
#respondprofile {
width: 70%;
min-width:25%;
margin-top: 0px;
float:left;
}
`

thankyou in advance
Melanie

[Senff]

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

This applies the styles to devices with a screen width of at least 768 and no more than 1024, which is (for example) an iPad, but definitely not iPhones/iPods, since their screen widths are smaller than 768.

[TheDoc]

Also keep in mind that by using min-device-width instead of min-width means that these declarations will only apply to devices. You probably also want this to apply to small desktop screens, too.

[melaniebund]

thanks alot, its sort of working…

[shaneisme]

Also keep in mind that by using `min-device-width` instead of `min-width` means that these declarations will only apply to devices.

device-width works fine on desktops.

http://ryanve.com/lab/dimensions/

device-width simply takes into account the pixels including the pixel density of the actual screen – not the viewport. So basically it doesn’t change… making a fluid design impossible at least if that’s the only media query you have.

[TheDoc]

@shaneisme: I just recently found that as well. This definitely did not use to be the case.

[Author]

Posts