142 posts
  • 3 Years of Membership
  • Author Level 4
  • Collector Level 2
  • Exclusive Author
+2 more
lspoor
says

I’m doing some experimenting with different site widths and I’m having one problem. I’m wanting to use a 980 container width. So I’ve taken the Skeleton framework, taken the container css:

.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }

And changed it to

.container { position: relative; width: 960px; margin: 0 auto; padding: 0 10px; }

to expand the width out as this is what I need.

The layout works great on desktop, iPhone and iPad LANDSCAPE but for some reason it won’t all fit on the iPad portrait orientation? It overlaps with about 20pixels.

My mobile meta tag is:

meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1”

I’ve uploaded a basic example so you can take a quick look (obviously you’ll need an iPad) -

sites.lukespoor.com/layout/

Orange background is the container with the 10px of padding on left & right, and the red is the 940px sixteen column.

Any ideas how to take this 980width on with the portrait orientation on the iPad?

438 posts
  • 3 Years of Membership
  • Author Level 4
  • Collector Level 3
  • Exclusive Author
Pixelous
says

Sure coz u have add 10px to the left and to the right, so change width of .container to 940px.

126 posts
  • 3 Years of Membership
  • Author Level 2
  • Exclusive Author
  • United Kingdom
matt5409
says

maybe a better solution than what @Pixelous said would be to add another container inside your container and put the padding on that one. don’t mess with skeleton.css as this controls the layout (base.css is where you add your own stuff).

142 posts
  • 3 Years of Membership
  • Author Level 4
  • Collector Level 2
  • Exclusive Author
+2 more
lspoor
says

Sure coz u have add 10px to the left and to the right, so change width of .container to 940px.

I don’t think you understood me, I need the 980 width container.

161 posts Can't stop the signal
  • Elite Author
  • Weekly Top Seller
  • Exclusive Author
  • Author Level 7
+4 more
FranklinM2
says

Hey Luke, You could use css3 media queries to decrease the width of the container just in the portrait mode and let the others use the 980px width.

by
by
by
by
by
by