WordPress.org

Ready to get started?Download WordPress

Forums

Images overlapping in pages and posts (5 posts)

  1. Kundry
    Member
    Posted 5 months ago #

    Hello,

    I've been trying to find a solution to this problem on the Headway forum for a week now and they finally told me it was a WordPress problem.
    Here is the reply I got:

    "The images are going to overlap because the height and width are set within the post, which is a WordPress function, so they are not resizing as the browser does. You'd need to use media queries (CSS) to adjust this or find a responsive gallery plugin."

    One week ago, I didn't have this problem and of course I tried with all the plugins deactivated. Images don't resize any longer when I shrink the size of the browser and in the wordpress galleries, images overlap.
    I really hope you can help me, I'm at a loss.
    Here is my site and everything is up to date:
    http://www.kundryland.com

  2. alchymyth
    Forum Moderator
    Posted 5 months ago #

    Here is the reply I got:

    "The images are going to overlap because the height and width are set within the post, which is a WordPress function,

    rubbish - it is the theme's task to deal with images in a responsive design.

    a simple CSS like this might already be enough to keep the post images from overlapping:

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

    try https://wordpress.org/themes/tag-filter/ and tick the 'responsive-layout' box to see themes that shouldn't have problems with images overlapping.

    please keep contacting your theme's developer - unfortunately, this forum does not support commercial themes; http://codex.wordpress.org/Forum_Welcome#Commercial_Products

  3. Kundry
    Member
    Posted 5 months ago #

    This is brilliant! It worked! Thank you so much! The only bug now is my thumbnail images in the column on the left which still overlap.
    I knew all along this was "rubbish". I don't think I'll be renewing my license with Headway.
    Thanks a million!

  4. alchymyth
    Forum Moderator
    Posted 5 months ago #

    for the left column, similar, for example:

    .column img { max-width: 100%; height: auto; }
    .column .gallery img { max-width: 95%; height: auto; }

    the 95% allow for the image borders of the gallery images.

  5. Kundry
    Member
    Posted 5 months ago #

    Oh my god... you've done it again! This is just PERFECT!!! That's very generous of you ,sir. I really appreciate that. Thank you!!!

Reply

You must log in to post.

About this Topic

Tags