[Resolved] Image in element expands mobile width

Home Forums Support [Resolved] Image in element expands mobile width

Home Forums Support Image in element expands mobile width

  • This topic has 9 replies, 3 voices, and was last updated 1 month ago by Ying.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2041527
    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

    #2041583
    Ying
    Staff
    Customer Support

    Hi William,

    Did you forget to attach the links?

    Let me know ๐Ÿ™‚

    #2041810
    William

    Ah yes just added!

    #2041826
    Ying
    Staff
    Customer Support

    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;
    }
    #2042299
    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?

    #2042689
    David
    Staff
    Customer Support

    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;
        }
    }
    #2042913
    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?

    #2042977
    Ying
    Staff
    Customer Support

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

    #2048611
    William

    Gotcha, thanks for the help!

    #2049216
    Ying
    Staff
    Customer Support

    No problem ๐Ÿ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.