У меня есть два телефона. Один с большим экраном, второй маленький. Как сделать адаптацию под маленький экран?

Question

[Роман Тузов]

На скринах у большого экрана нормально выглядит блок с новостями (видно рамки чёрные по бокам блока), а у маленького он сильно увеличен (видно на скрине, что рамок по бокам уже нет, блок растянут не под размеры экрана). Как сделать адаптацию, чтобы на маленьком экране блок выглядел так, как на большом? Прописывал для всех экранов Media 768px. Может я не правильно написал разрешение, поправьте пожалуйста как правильно. P.S. Если нужно больше информации о чём-то, скажите - дам

Answer 1

[Andrew]

html -> head

<meta name="viewport" content="width=device-width, initial-scale=1.0">

и всю ширину блоков задайте в процентах

Comments

[Роман Тузов]

Не помогло. Может я что-то не так задал? Вот можете посмотреть код: https://codepen.io/HutsonR/pen/QWWrBXz

[Andrew]

Hutson, https://codepen.io/kickerock/pen/XWWYJGM
максимум что я смог из этого выжать.
У вас избыточное кол-во width, height аттрибутов
Можно задать размер только обёртке, для всех элементов и уже там max-width играться.