[Resolved] Image in element expands mobile width

[William]

Hi there,

I have an image in the header for category pages such as this and post pages such as this. It seems all fine. However, I’ve noticed the image causes the width on mobile to be larger than what it should for mobile.

Is there a way to prevent this and make sure the image is exactly the same size, for both the above URLs?

Kind regards,

Will

[Ying]

Hi William,

Did you forget to attach the links?

Let me know 🙂

[William]

Ah yes just added!

[Ying]

1. These 2 CSS are overriding each other:
https://www.screencast.com/t/exq7GboZW

To avoid horizontal scroll, the unsetone needs to be removed.

2. For the ads, it’s really hard to control, try this CSS:

html, body {
    overflow-x: hidden;
}

[William]

The two CSS is for two different page heros: one is for category page hero, and the other is for post hero?

Also, if I add the code suggested, it removes the sticky navigation menu?

[David]

Hi there,

the CSS for the Post is generic ie. it also applies to the category and then gets overwritten by the category hero CSS as its more specific.

If you must keep the images at different sizes then add this CSS to fix the image width on small screens:

@media (max-width: 500px) {
    .page-hero .category-image-style img {
        max-width: 100px;
    }
}

[William]

Hi there, I would like the image to be exactly the same size for both. But, the main issue is that the width is overflowing as per the image for mobile?

[Ying]

Then reduce the max-width for both, otherwise it will cause the issue you are having now.

[William]

Gotcha, thanks for the help!

[Ying]

No problem 🙂

[Author]

Posts