CODEWITHSUNDEEP
htmlcssmargin
rectangletangle
rectangletangle

Reputation: 52941

Collapsible Margins HTML/CSS

I have my subject matter here taking up 50% of the screen width, which leaves a nice margin on larger screens. However on smaller screens, this takes up valuable screen space. Is it possible to have the margin "collapse" in order to preserve the subject matters width? Or possibly give a range of acceptable widths? Basically I want the margin to shrink, prior to the subject matter shrinking. 

<!doctype html>

<html>

  <head>
  </head>

  <body style="margin-left:auto; margin-right:auto; width:50%;">

    <p style="height:100%; background:#878787;">some text</p>

  </body>

</html>

Upvotes: 0

Views: 260

Answers (1)

Alfred Xing
Alfred Xing

Reputation: 4632

You could look into using CSS @media queries.

To make sure the margins shrink before the content, use a fixed pixel width for the content and margin: 0 auto.

And when the pixel width is wider than the screen, make that width smaller:

body {
    width: 500px;
    margin: 0 auto;
}

@media screen and (max-width: 500px) {
    body {
        width: 250px;
    }
}

Upvotes: 1

Related Questions