image doesn’t auto fix by simulating Ipad screen size

I am using wordpress to develop a website called littleboyauciton.com. I added an image at the top right of my header, and added css code:

img.sslsecure {
    max-width: 40%;
    min-height: auto;
}

This is displayed normally on my computer screen. But when I use chrome to simulate the ipad screen, the picture cannot be displayed on the header.

I added the css code corresponding to the screen in css, but it still has no any effect:

@media only screen and (max-width: 768px) {
    img.sslsecure {
    background-attachment: scroll;
    }

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

It is doing exactly what it should do, it takes up 40% of the width of it’s parent div. When you inspect the element, you can see that the parent actually almost takes up 100% of the screen width.

You can fix this by adding extra css for different screen sizes. This can be done in the theme you are using.

Or you can add extra css and write a media query yourself.

See:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Edit.

I just saw that you’ve tried adding a media query. You did it right, yet you have to change the width of the element or the parent element. background-attachment: scroll; only applies to elements with a background-image. Since this is an img, it doesn’t apply to this element.

Let’say, I don’t want the image to be wider than 100px:

@media only screen and (max-width: 768px) {
 img.sslsecure {
  max-width: 100px;
 }
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0