Extra-Wide Images / Panoramas not Effected by overflow-y:hidden

How are you adding your code to display this into your WordPress page, and are you using the classic editor or the Gutenberg block editor?

…and by the way, is your image actually 2112px height and 12,784px wide?

Quick Update. I put your code in my local test site and no scrollbar and the image is fitting 100% in the content container. So, a bit of investigation and I think I know the issue for you…if your theme being used is responsive, it means your theme has something like this in the style.css file:

img {
    max-width: 100%;
    height: auto;
}

So every image will be turned into a responsive image. One way around this is to add a class (example: .test ) to your div or image, and then change the max-width to:

.test img {
    max-width: initial;
}

**Do this in your Additional CSS tab of the customizer. I did this and it worked for me where I got the scrollbar and was able to slide to view your full image.

Yes the image actually is 2112px height and 12,784px wide. You can click on it see the original photo by clicking on either image on the page.

After trying many things that didn’t work, that page was composed using an HTML block with the Gutenberg block editor.

Thanks, @roughpixels I’ll try that. In the mean time, my basic HTML pages (linked to from the WordPress page) are responsive!

@roughpixels See new page testing your suggestion. You can see that applying it in the obvious ways doesn’t work.

Tried so many things, lol. But, this might work for you as it did on my testing the third image down in your “new page”.

These sets worked:

div.test {
    overflow-x: auto;
    display: block;
}

figure.wp-block-image.test {
    overflow-x: auto;
    display: block;
}

figure.wp-block-image.test.mypanorama {
    overflow-x: auto;
    display: block;
}

figure.wp-block-image.is-resized.test {
    overflow-x: auto;
    display: block;
}

@roughpixels Thank you, thank you!

I took your ideas and modified them a bit by reusing the class name “my_pano”. Then I only have to apply one class. It works on all my devices/browsers. I hope it doesn’t violate any standards. See my test page.

figure.wp-block-image.my-pano {

overflow-x: auto;

    display: block;

}

/* for panorama images */

.my-pano img {

max-width: initial;

	height: 400px;

overflow-x: scroll;

	overflow-y: hidden;

}

(That didn’t format the way I thought it would!)

`figure.wp-block-image.my-pano {
overflow-x: auto;
display: block;
}

/* for panorama images */
.my-pano img {
max-width: initial;
height: 400px;
overflow-x: scroll;
overflow-y: hidden;
}

You are very welcome ??

I just looked at your page, so it appears to be working, at least compared to before. Also, it doesn’t violate any standards; not to worry.
Is it safe to say this issue/topic is resolved?

Cheers,
Andre

Yep, resolved, thanks again.