[Solved] Iphone responsive design not working

[codeaholic]

I’ve been battling this problem now for what seems like ages. You can reproduce the problem at http://www.salescart.com. I have a “main image” there that sizes itself for all the browsers I’ve tested with using background-size: cover; No problem there.

The problem is no matter what I do I cannot change it or make it work and be responsive for an iPhone.

     HTML
        <a href="Cloud/Getting-Started/default.html#FreeStore">
        <img alt="Forever Free Ecommerce" src="Cloud/images/warehouse2.png" class="centerImage" style="border-width: 0px; " id="MainBanner" />
        </a>

     CSS
     .centerImage {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

     background-size: cover; 
     background-repeat: no-repeat;
     /* text-align: center; */
     width: 100%;
     height: 100%;
     }
               
}

This is my latest CSS attempt to load a different image. Nothing CHANGE!

     @media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
     #MainBanner {
     /*display:none !important */
     content:url("Cloud/images/Mainscreen-iphone.png");
     background-size: 500px 373px;
     -moz-background-size: 500px 373px;
     -webkit-background-size: 500px 373px;

     background-attachment: fixed;

     }
     }

I really could use some help on how to solve this.

[Ward Larson]

throw !important after your background-size properties under #MainBanner?

[Ward Larson]

You’ll need to place !important within the semicolon, not outside it. Try: background-size: 640px 426px !important;

[Senff]

The problem is that the styles in your media query are fully ignored. No amount of !important tags will change that.

Remove the closing bracket from line 592 or 594 (only one of them), and things should work.

[Author]

Posts