Image Caption Breaks Layout

  • Resolved Squidpeg9

    (@squidpeg9)


    7 years, 8 months ago

    I have a site here:
    https://aabreauconstruction.com/past-projects/

    The issue is, when I add captions to these pictures, it breaks the layout. I have two sets of images on here now. The first set is laid out exactly how I want it. The second set it done the same way EXCEPT I added the captions. It breaks the layout.

    I DON’T want to declare a static image size as the caption tries to force me to do, and when I try to change the size to the percent I want, it makes the image extremely small. How can I fix this issue?

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

  • What do you mean by “breaking the layout”? Do you want the 3rd and 4th images (bigger ones) to appear like 1st and 2nd (side by side) with image caption added, too?

    Thread Starter Squidpeg9

    (@squidpeg9)

    Yes. With the captions below each image.

    I see. I guess you’ll need to make a few changes in the code.

    Change (for the 3rd image)
    <figure id="attachment_86" style="width: 700px" class="wp-caption alignleft">
    into
    <figure id="attachment_86" style="width: 47%" class="wp-caption alignleft">

    Change (for the 4th image)
    <figure id="attachment_87" style="width: 700px" class="wp-caption alignnone">
    into
    <figure id="attachment_87" style="width: 47%" class="wp-caption alignleft">

    Then, update CSS

    figure {

	margin: 1em 40px;

}

    into

    figure {

	margin: 1em 0;

}

    If you don’t want to touch style.css file, you can do this by adding the above code in “Edit CSS” (under “Appearance”).

    Feel free to get back to me if you have any questions. Thanks!

    • This reply was modified 7 years, 8 months ago by Joey.
    Thread Starter Squidpeg9

    (@squidpeg9)

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Image Caption Breaks Layout’ is closed to new replies.