Forums

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

Home Forums CSS [Solved] @Media Image Positioning

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #196000
    reggiemichel
    Participant

    Please Help?!?!? I’m a novice and trying to make an image reposition on mobile device width 320 with the following code:

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio : 2)
    #leadpages-form-image-b {
    position: absolute;
    padding: 0 20px 0 0;
    max-width: 285px;
    max-height: 269px;
    margin-top: -985px;
    margin-left: 79px;
    z-index: 99999 !important;}

    CodePen Link: http://codepen.io/anon/pen/ZYrZEK.css

    No matter what I changes I make the image continues to stay in the same place?!?!? Please help… Thanks In Advance!

    Reggie

    #196002
    Paulie_D
    Member

    Firstly, I would say don’t use absolute positioning, it’s a very inflexible layout method….there are much better and more flexible alternaives.

    http://learnlayout.com/

    #196004
    Senff
    Participant

    You’re making a few mistakes.

    First, it should be 480px and not just 480.
    Second, your style should be wrapped in { and } within the media qeury.

    The correct format would be:

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio : 2) {
       #leadpages-form-image-b {
           position: absolute;
           padding: 0 20px 0 0;
           max-width: 285px;
           max-height: 269px;
           margin-top: -985px;
           margin-left: 79px;
           z-index: 99999 !important;
       }
    }
    

    From a coding style point of view there are some other things I wouldn’t recommend, but I’m sure you have your reasons for that so I won’t go into that. Either way, the above code should solve your original issue.

    #196010
    reggiemichel
    Participant

    Thank you Senff! That worked Great! Again, I have no css coding experience whatsoever. I’m piecing all of this together by doing google searches. If you have recommendations on how I can improve my code, I’m completely open. Thanks Again!

    #196011
    reggiemichel
    Participant

    Thank you for the response Paulie! I’ll definitely check out the learnlayout to get better.

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