iOS tweaking

[Davallen]

Hi,

 

My website www.baboony.dk looks a bit odd on iOS devices and hope that someone could point me in the right direction to tweak it properly.

 

As you can see on the image, there is no padding on the left side of the content and the top blue bar with USP's, is not going all the way to the edge to the right, the text next to the last two icons is also being pushed down.

 

 

Thanks for your help

Edited December 2, 2013 by Davallen (see edit history)

[vekia]

you've got width param for <li> elements defined in pixels (in reinsurance block)

so there is not enough space to display 4x175px

[PascalVG]

Hi Dav ;-)

Body is too small, and blue clips on body. Set to 1199, like the other widths in global.css.

wrapping text seems be be okay then as well, you can add some padding here as well, but as blue bar fills full screen maybe not necessary.

/themes/Umut/css/global.css:

body{

    background: #fafafa;

    font:normal 13px/14px Helvetica, Verdana, sans-serif;

    color:#282d31;

    /*background:#ebebeb;*/

    width: 1199px;

    margin-left:10px;

    margin-right:10px;

}

 

pascal.

[Davallen]

Hi Vekia and Pascal,

 

I've followed your advices and cleaned it up a bit, thanks! It looks good now, but the blue bar is not going all the way to the right. Do you have any clue?

[PascalVG]

Hi Dav, checked your files, but couldn't see the changes in global.css. Added them for you. Seems to work. Please check other pages a little if there are no strange side effects :-)

 

pascal

[Davallen]

Hi Pascal,

 

Thanks, but if the body has a fixed size, the blue bar will stay within the div, I removed the fixed size so the blue goes all the to both sides and fills it up. Now I just need to fix the missing part on the right side and the padding from both sides, other than that, it looks good.