Images overlapping in pages and posts

  • Kundry

    (@kundry)


    10 years, 1 month 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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Michael

    (@alchymyth)

    10 years, 1 month 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

    Thread Starter Kundry

    (@kundry)

    10 years, 1 month 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!

    Michael

    (@alchymyth)

    10 years, 1 month 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.

    Thread Starter Kundry

    (@kundry)

    10 years, 1 month 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!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Images overlapping in pages and posts’ is closed to new replies.

Tags