CSS percentage width on image suddenly stopped working?-CodePudding

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! :)

CodePudding user response：

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

CodePudding user response：

thanks for all the replies - much appreciated! :)

I ended up running a site restore from a backup on Siteground. Everything is now back to normal, my original CSS is all working.

I've never seen anything like this before?? - The last plugin I installed before the CSS went weird was Rank Math? - Perhaps something went wrong when it imported the settings from Yoast? - or perhaps it was something weird going on with the web hosting. I don't think I'll ever know... fingers crossed this is all sorted now!

Thanks again for everyone's help! Kind regards

Brian