Search code examples
htmlcssioswordpressipad

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.

normal

ipad

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;
    }
Solution

  • 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;
 }
}