• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 272
  • Last Modified:

Responsive margin

If a website is centered in the browser window using a div with id "container" with margin :0 auto; How can I add 20px margin when the browser window width is less than the website width? I've tried the following:
#container {margin:0 auto;}
@media (min-width:1000px) { #container {margin:0 0 0 20px;} }

Open in new window

But this seems to always include the margin, it only seems to apply whatever is in the @media (min-width:1000px) css.
1 Solution
ncwAuthor Commented:
This seems to do it for a 1000px wide site:
@media (max-width:1040px) { #containerHome {margin:0 0 0 20px;} }
@media (min-width:1040px) { #containerHome {margin:0 auto;} }

Open in new window

Unless there's a better way without adding an outer div.
No, that's the correct way to do it.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now