Как изменить размер картинки в нужном DIV через CSS для мобильной версии?

Question

[Greg Plitt]

Добрый день! Подскажите пожалуйста, как прописать параметры изображения конкретно для одного типа картинок, которые выводятся у меня как обложка к посту?

Я обычно использовал такую вставку прямо в посту

<style>
@media only screen and (min-width : 320px) and (max-width : 480px) {
 img {width: 100%;}
}
</style>

Но, в CSS файл когда я вставляю код:

@media only screen and (max-device-width: 480px) {
    div#single-featured-image-header {
        width: 100%;
    }

Рушиться вся верстка.
Как видно по коду, мне нужны изменения только в div'е : single-featured-image-header

Что я не так делаю? Буду рад помощи...

Comments

[Dymok]

id на странице может быть только один, поэтому, если у вас несколько итемов, нужно выбирать по классу

[Greg Plitt]

Dymok, судя по html коду:
<div class="single-featured-image-header">у меня и прописан. Так, как в CSS именно на него поставить условие в width: 100%; ?

[Dymok]

Greg Plitt, селектор
div#single-featured-image-header выберет все div с id single-featured-image-header
Чтобы выбрать div'ы с классом single-featured-image-header нужно использовать селектор div.single-featured-image-header

Answer 1

[Denis Kunitsyn]

media only screen and (max-device-width: 480px) {
.single-featured-image-header {
width: 100%;
}
}
див перед id зачем писать? и скобку в конце поставьте } закрывающую медиа и еще у вас не id а class соответственно не # а . перед названием класса

Comments

[Greg Plitt]

Я начал править, ничего не вышло. Перебрал весь html по кускам вывода этого блока.
Позже вы отредактировали свой ответ и оказывается, нужно вставлять ТОЧКУ, а не #. После этого всё заработало) Спасибо!

[Denis Kunitsyn]

Greg Plitt, успехов в вёрстке ; )

[Greg Plitt]

Denis Motive, не пойму, что случилось. Но снова всё отображается без учёта вставки кода в css
Можете посмотреть пожалуйста? Вот это ЧБ изображение, на данной странице https://f8t.ru/trenirovki-rostov/ должно было растянуться в мобильной версии, но осталось уменьшенной как есть.

Код в css:

.single-featured-image-header img {
	
	height: 25%;
	margin: auto;
	width: 25%;
}

@media only screen and (max-device-width: 480px) {
.single-featured-image-header {
width: 100%;
}
}

Почему стиль стал отваливаться?..