How to change the size of the image in the desired DIV through CSS for the mobile version?

Question

css

Good afternoon! Can you please tell me how to set the image parameters specifically for one type of images that are displayed as a cover for a post?
I used to use such an insert right in the post

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

But, in the CSS file when I paste the code:

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

The whole layout is crumbling.
As you can see from the code, I only need changes in the div : single-featured-image-header
What am I doing wrong? I'll be happy to help...

Answer 1

media only screen and (max-device-width: 480px) {
.single-featured-image-header {
width: 100%;
}
}
div before id why write? and put a parenthesis at the end } closing the media and you also don't have an id but a class, respectively, not # but . before class name