Thick white line through responsive Layout

Hey,

I had this problem a few weeks ago with an other website, but I don’t know how to fix it here. The developer tools in Safari don’t show the padding that makes those thick white lines on the right.

For reproducing the problem please load the page on a 640px-width Phone or iPod, it doesn’t come up when resizing the browser on a PC/Mac. This is the website: http://www.phermann.tk/new/index.html

Note: The website is under construction, the pictures in the ul have ultra-high-resolutions and aren’t adjusted yet.

Thank you.

I don’t see a problem on the iPhone. Could you eleborate on what the issue is?

Thank you for your help. It seems like you don’t have those problems, so I uploaded a screenshot from my iPhone.

As you can see there is a white bar in the right. I think there is a problem with some paddings of some objects.

I don’t see it on the iPhone, but I can replicate it in Chrome. It’s to do with your #wrapper area. For example, remove this and you will see a difference:

#wrapper li {
float: left;
[COLOR="#FF0000"]padding: 10px;[/COLOR]
}

Hi,

The problem is caused by your list that you have set to be 100% wide plus 10px padding each side resulting in the element being 20px too wide.

The graphic, website and player elements are 310px wide but with the extra padding it means they are also too wide to fit on a 320px iphone (don’t confuse your resolution with the iphone width which is still 320px).

Removing the padding in the media query here should sort the issue.

@media only screen and (max-width:640px) {
#wrapper li {
    width: 100%;
				padding:10px 0;
}
}


Edit:

I see Ralph posted the same while I was testing :slight_smile:

I also notice your doctype is missing which will cause havoc in older versions of IE and possibly trip quirks mode in some others.

Ok, thank you for the hints. Removing the padding seems to be the resolution. Thank you. I was used to have an automatic doctype head in dreamweaver, but recently I switched to Brackets, thats why I forgot to add the doctype stuff.

This is one of the most active and quick forums I have ever seen. Thank you.

Thanks. We try our best :slight_smile: