CSS padding issue in iPad and iPhone

HTML & CSS
1

Hello,

Our site has a couple of small issues in iPad and iPhone. See screenshot here: http://o7.no/lWe4h6. Firstly the ‘Shop By’ navigation item is on the new line, we can’t seem to fit it on the first line. Also the right column is not showing correctly.

Any pointers to fix these issues would be great!

Thanks

2

Yeah, it’s a bit dangerous to try to cram in links to a menu like that, as if some browser calculates all those widths a little differently, things start to drop. Same with columns.

3

You could give your menu a little more breathing room via a wider site or smaller text or other. Or you could give each link a specific width via ids on each and do it pixel perfect. On the side bar it prob needs more breathing room or maybe a min width on some container. I would try first to just make it work in all with the same code. But if you cannot then use this to feed ipad and less

@media screen and (min-device-width:320px) and (max-device-width:768px) {
div {
yada
}
}

4

Hi,

Assuming you haven’t got a dropdown menu on the last item in that menu then the following code will give you 14 pixels extra breathing space by removing the need for padding on the last item while still keeping the item space out.



#nav li:last-child{
float:none;
text-align:center;
zoom:1.0;
overflow:hidden;
}
#nav li:last-child a{padding:0}
5

Fantastic, this worked! Thanks :slight_smile: