Control shrink priority in CSS

Issue

Let’s say I have a page with centered content. This content ideally will be centered, with big margins (or paddings, I’m really a newbie at this) on each side.

How do I control the priority, i.e. which elements shrink first, when the window is resized?

Check the following example.

https://jsfiddle.net/v7412jpg/

It all shrinks proportionally (horizontally), which I do not want. The margins should be sacrificed before we start touching the content.

I have also tried with the flex-shrink concept, without success:

https://jsfiddle.net/w0s4xmc0/1148/

Solution

You will need to set a width and a max-width for your body. For example:

.content {
  width: 95%; /* the remaining 5% is your "padding" */
  max-width: 600px; 
  height: 100%;
  background-color: red;
}

Answered By – Victoria Ruiz

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.