- This topic is empty.
-
AuthorPosts
-
January 25, 2015 at 2:58 pm #194214melaniebundParticipant
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
MelanieJanuary 26, 2015 at 1:57 pm #194277SenffParticipant@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.
January 26, 2015 at 11:18 pm #194306TheDocMemberAlso keep in mind that by using
min-device-width
instead ofmin-width
means that these declarations will only apply to devices. You probably also want this to apply to small desktop screens, too.January 27, 2015 at 9:17 am #194347melaniebundParticipantthanks alot, its sort of working…
January 27, 2015 at 1:00 pm #194368shaneismeParticipantAlso 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.February 4, 2015 at 4:49 pm #195139TheDocMember@shaneisme: I just recently found that as well. This definitely did not use to be the case.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.