CODEWITHSUNDEEP
iphonehtmlcssresponsive-design
DomingoSL
DomingoSL

Reputation: 15504

CSS responsive-design issue between pc browser and iphone browser

im having some problems to understand how to render a web page in a decent way on the iPhone, i think the problem have to be releated with the margin-left but i have no idea how to solve the problem in order to have a good render on pc and mobile.

Here is how it looks on a pc browser: enter image description here

Sorry for so many white spaces, is just to clarify the div is centered. And this is how its looks on my iPhone:

enter image description here

Even if a move the page with my finger im not abble to see the left side of the blue ribbon, it is just "out of the screen".

This is my code (part of it):

CSS

#center-coupon {
  width: 474px;
  height: 255px;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -237px;
  margin-top: -150px;
  text-align: center;
}

#rib { 
  background-image:url(img/ribbon.png); 
  height:75px; width:474px; 
}
#main4 { 
  position:relative;
  background-color:#eeeeee;
  height:300px; 
  width:340px;
  left:66px 
}

Html

<div id="center-coupon">
  <div id="rib"></div>
  <div id="main4">
    <p style="font-size:35px;font-weight:bold;padding-top:15px;">El bar de mou</p>
    <p>coupon awarded to</p>
    <img src="http://graph.facebook.com/XXXXXXXXXX/picture" alt="profile picture" class="img-polaroid">
    <span style="font-size: 25px; font-weight:bold;"> Domingo</span>
    <p style="margin:10px 0 0 0; font-size: 17px;">Valid for: <b>Beer moretti 0.2l</b></p>
    <p>created on 2012-10-21</p>
    <a data-toggle="modal" href="#destroy_c" class="btn btn-danger btn-large">Destroy Coupon</a>  
  </div>
</div>

I know the center-coupon div is widder than the iphone screen, but that does not explain why im not abble to see part of the left side of the ribbon... A good solution will be forse the iphone to render the site with less zoom, but i dont know if that is possible, and dont know if that propety will be compatible with other mobile platforms. So what do you think?

Upvotes: 0

Views: 503

Answers (2)

Rick Donohoe
Rick Donohoe

Reputation: 7281

You're negative margin is more than half the viewport width of an iPhone, therefore it is dragging it out of view.

If you want to center an element, you can use margin: auto (so long as an explicit width is set) rather than positioning the element with absolute positioning.

Upvotes: 1

NickD
NickD

Reputation: 351

I am no iPhone expert, but it is my understanding that the pixel density of the device has nothing to do with the CSS pixels. So, as far as CSS is concerned, the width of the phone is 320px. You are positioning the left edge of the coupon in the middle of the page, then moving it 237 pixels to the left, which essentially places it off of the screen. Have you tried changing the negative margin to a smaller amount?

Upvotes: 1

Related Questions