При ширине экрана 768px, как задать определенные размеры, чтобы внутри блока текст не сужался?

Question

[Mello Mello]

.news__item:nth-child(1)(2, 3 и 4) {
float: left;
padding-right: 20px;
box-sizing: border-box;
}

'@'media (max-width: 768px) {
.news__item {
float: none;
width: 100%;
padding-left: 20px;
}
news__item - это новостные блоки, которые при сужении до 768px и ниже, должны выглядеть, как на последнем скрине.
Как сделать так, чтобы при сужении до 768px, новости не сужались, а сразу приняли вид последнего скриншота?

Comments

[Антон Литвиненко]

лично я вопрос не понял
возможно вы имеете в виду, чтобы на брейкпоинтах происходил резкий скачок ширины, тогда посмотрите как сделана сетка бутстрапа и возьмите за основу. там на каждом брейкпоинте container принимает ширину близкую к следующему брейкпоинту

[Palpebral]

На float так сделать скорее всего нельзя. Даже если менять ширину.
На flexbox такое делает легко. У вас есть 4 карточки. Для контейнера ставится display: flex, по умолчанию у flex-элементов есть такое свойство как flex-direction: row - весь контент блока располагается в строчку. Но при достижении 768px просто ставишь для контейнера flex-direction: column, а элементам (карточкам) на всякий случай прописываешь flex: 0 1 *свой размер ширины*. Таким образом карточка будет заданного размера, но если нужно будет - уменьшится (если будет давить ширина экрана).
Без знания flex никуда, так что учи это)

[Ankhena]

Mashush,

элементам (карточкам) на всякий случай прописываешь flex: 0 1 *свой размер ширины*

учитывая, что при flex-direction column и basis и grow с shrink'ом будут работать на высоту, вы сказали ерунду.
Mello Mello
На мелких экранах просто задаете display:block родителю (при mobile first вообще ничего не задаете).
float не используете, как сказал и предыдущий оратор, используете флексы или гриды. С гридами проще за счет того, что у них есть grid gap. Но для вашего случая, когда количество столбцов известно и не меняется это не играет особой роли.

[Palpebral]

Ankhena, да, точно, прошу прощения. Просто давно не занимался нормально вёрсткой, последние месяцы JS все учу)

Answer 1

[Ankhena]

Всё что вам нужно: https://jsfiddle.net/608fz5gc/