22 posts
  • Attended a Community Meetup
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 5 000 and 10 000 dollars
  • United Kingdom
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?

439 posts
  • Bought between 50 and 99 items
  • Europe
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 5 000 and 10 000 dollars
Pixelous says

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

126 posts
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 100 and 1 000 dollars
  • 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).

22 posts
  • Attended a Community Meetup
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 5 000 and 10 000 dollars
  • United Kingdom
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.

79 posts
  • Microlancer Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Bought between 50 and 99 items
  • Referred between 50 and 99 users
  • Exclusive Author
  • Has been a member for 3-4 years
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