Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] problem @media only screen

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #194214
    melaniebund
    Participant

    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

    #194277
    Senff
    Participant
    @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.

    #194306
    TheDoc
    Moderator

    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.

    #194347
    melaniebund
    Participant

    thanks alot, its sort of working…

    #194368
    shaneisme
    Participant

    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.

    #195139
    TheDoc
    Moderator

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.