32 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+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
  • Has been part of the Envato Community for over 2 years
  • Has sold $5,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Located in Europe
+1 more
Pixelous says

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

126 posts
  • Has been part of the Envato Community for over 2 years
  • Has sold $100+ on Envato Market
  • Sells items exclusively on Envato Market
  • Located in 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).

32 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+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.

138 posts
  • Sells items exclusively on Envato Market
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has been part of the Envato Community for over 3 years
+2 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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by