Question 8230 in PHP Versions Question posted in
You can find a list of all versions here.

CSS percentage width on image suddenly stopped working? – PHP Versions

I have no idea why, but the CSS that controls the image size, most notable in the header images on the main widescreen image banners on mobile screens has suddenly stopped working?

The website is hosted on Siteground, for some reason, the max width of all images is now 100% or less??

This happens if I set a larger specific pixel width eg. 2900px or a larger percentage.

This is affecting all the images, including those with and without text overlays.

On mobile, I usually have the width set to 300% + so that it fills the whole panel.

The live website is – https://www.hagleyartificiallawns.co.uk/

I’ve spent the whole day, disabling plugins, changing PHP version, messing with the CSS, but it just doesn’t work anymore. It was working fine yesterday and all week previously – am I missing something really obvious??

Any suggestions?

Thanks in advance, I think I’m going insane looking at this! 🙂

Tags:

2

Answers


  1. 0

    Remove all width assignments on your image so the height can scale with the container:

    #topBanner img {
    width: 100%;
}

    @min-width: 768px
#topBanner img {
    width: 130%;
}

    #overlay img, #fullBanner img {
    /* width: 100%; */
}

    html :where(img) {
    max-width: 100%;
}
    Login or Signup to reply.
  2. 0

    On WP 5.9.2 the includes/css/dist/block-library/style.min.css has the following CSS declaration:

    html :where(img){ height: auto; max-width: 100% }

    You can try to use replace with, the the file or use a plugin for custom css.

    html :where(img[class^="wp-image-"]) {
    height: auto;
    max-width: 100%;
}

    More readings at

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search