Как верстать блоки текста в картинке?

Question

[Rufix]

Как сверстать такой блок?

Насколько я понял, здесь нужно использовать position: absolute и т.д
Сделать фиговинку с "Новинка", на моем разрешении все ок, но когда начинаю зумить то получается такое:


Просто я с адаптивной версткой еще не знаком и не знаю, нормальное ли это явление..

Вот код как я верстал эту часть:

<section id="new">
			<img class="new-background" src="img/child.png" alt="bg">
			<p class="new-new">Новинка</p>
		</section>

.new-background{
	width: 100%;
	position: absolute;
}

.new-new{
	font-size: 14px;
	text-transform: uppercase;
	position: absolute;
	left:13%;
	background: white;
	padding: 7px 30px;
	top: 120px;
}

Comments

[Ankhena]

Где логика: сами же называете класс "new-background", а потом картинку вставляете через img?
Да и "Новинка" это, вероятнее всего, не абзац, а псевдо.

Делайте решение без абсолютов, благо оно есть и даже не одно.
Есть margin и padding.
Чем меньше абсолютов, тем легче жить.

Примерно так: https://jsfiddle.net/vckx52zu/
Возможно вам потребуется calc для отступов. Об этом можно поговорить позже, если расскажете как элементы должны вести себя для адаптации.

Answer 1

[Глеб Варганов]

У Вас при зуме все объекты увеличились пропорционально, это нормально. Адаптивная вёрстка предполагает не зум, а другое разрешение экрана. Если вы хотите, чтобы на смартфоне это выглядело по другому, вам следует использовать медиа запросы, в которых вы прописываете свои правила для того или иного разрешения.

Comments

[Rufix]

Ну то есть я все сделал верно? Код который я написал тоже правильный?

[Глеб Варганов]

Rufix, да, вы можете использовать данный вариант

Answer 2

[tseries Task]

Поддержку комментарий сверху. смотрите на разных разрешениях свой сайт. можно использовать встроенную функцию в браузере. для chrome жмем f12 и в верхнем левом углу жмем на значок телефона.

Comments

[Rufix]

Ну то есть я все сделал верно? Код который я написал тоже правильный?