CODEWITHSUNDEEP
htmlcssmedia-queries
user6085320
user6085320

Reputation:

Border is not included in width calculation for media queries

which is causing things to look sloppy.

There is a div which expand to 100%, but the right border is cut off.

See the dev site here - it is under Feed

https://frozen-dusk-2587.herokuapp.com/

Here in image of me toggling the border using Chrome Dev Tools:

enter image description here

and here it is with me toggling on the border:

enter image description here

Upvotes: 0

Views: 123

Answers (3)

annieXo
annieXo

Reputation: 156

If you define an element with a width of 100% and also a border, the border is added to the 100% so this makes the total width more than 100% which is causing your problem (read up on the css box-model: http://www.w3schools.com/css/css_boxmodel.asp).

So one solution is that you could change the width of #at_view to less than 100%, try 90-95% - until things look right.

Or to be very specific, you can define #at_view width as 100% and subtract the border using calc():

#at_view { 
  width: calc(100% - 20px);
}

(Subtracting 20px, since it looks like 20px is the width being added by the border, as the border is 10px --> 10px on the left + 10px on the right = 20px.)

Upvotes: 1

arc.slate .0
arc.slate .0

Reputation: 428

Even such basic things as the box model can be modified using CSS Rules.

See

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

to change the default behavior of the box model:

#at_view{
  box-sizing:border-box;
}

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78550

This is the default behaviour for all box-sizing:content-box elements, which is the default value for all elements. add box-sizing:border-box; to #at_view. This causes the browser to include border and padding in relative width calculations.

Upvotes: 1

Related Questions