How to make blocks shrink evenly?

Question

css

After 980px, when narrowing the browser window, the news blocks fly off and the text fits over them. The width of the container cannot be changed. How to calculate their width? How can I make them shrink evenly to a critical point of 768 px?

https://codepen.io/nvanyukova/pen/YzqOxvq

Answer 1

Use the bootstrap grid . Or see how style classes work there and use them

Answer 2

Initially, use alternatives to the px scale unit, such as em, px, pt, experiment so that text and boxes scale down proportionally to the size of the window and are not clearly tied to pixels.

Answer 3

Use flexes , it's easier to live with them.