CODEWITHSUNDEEP
htmlcssmobile
Daffy
Daffy

Reputation: 89

CSS, Width:100% and the iPhone - what more can I try?

I am quite some way through a pretty much CSS only solution to make a mobile site for our e-commerce site. It's actually going quite well, apart from the fact that the x-axis consistently has a margin that shouldn't be there - I have put it in the CSS that width is 100% for most properties.

The only thing that has worked in visual practice (it made the y-scrolling really stuttery) was the addition of:

html
{
overflow-x:hidden;
}

So although it looked great and was exactly what I wanted I couldn't get the scrolling to be fixed, which is pointless for a mobile site.

On top of that I also added this to the page to detect screensize:

<meta name="viewport" content="width=device-width,initial-scale=1" />

I think that somewhere the media query is causing havoc:

@media screen and (max-width: 480px) {

Because it is the only place that specifies the 480px aspect of anything, and that's exactly where the margins continue to. So is it something I'm doing wrong here?

In hindsight I'm not entirely sure where I got the 480px from - think it was a copy and paste job!

Other things I have tried were removing the absolute positioning from a lot of elements, making sure everything has width of auto and displaying in a block.

I'm out of ideas and just want everything to be like the overflow-x solution!

Thanks in advance.

Upvotes: 1

Views: 210

Answers (2)

Fiona - myaccessible.website
Fiona - myaccessible.website

Reputation: 14919

As a rule, you shouldn't have to specify width: 100% on anything.

Chances are you have some padding or something on one of those elements causing it to be > 100%. All display: block elements will fill the width by default, you don't need to specify that.

It's not always the padding either, margin-right has caught me out enough times because you can't actually see it but it's there, pushing out the content

Upvotes: 2

Anpan
Anpan

Reputation: 1176

My guess is that a padding causes your element to be larger than 100%. If you want to avoid this, you can try applying box-sizing : border-box; to the affected element. Width and height will then include padding so you will actually get 100% ( or X pixels ) of width regardless of the padding and size of border you set.

Upvotes: 1

Related Questions