Table overflows content area

  • Resolved slimjim414

    (@slimjim414)


    10 years, 5 months ago

    I’ve actually had this issue before and fixed it using the following code:

    .tablepress-id-x img {
	max-width: 100%;
}

    However, for some reason with this particular table, it’s not working even when I insert the same code into the Additional CSS. You can find the link to this here. I need to make sure this solution works for mobile as well. Thanks for your help and fantastic customer service!

    https://www.ads-software.com/plugins/tablepress/

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The problem here is that the wrapper around the images, the HTML code like

    <div id="attachment_903" style="width: 240px" class="wp-caption aligncenter">

    sets a fixed width of 240px, and that’s what causes the trouble here.
    I suggest to remove that.

    Regards,
    Tobias

    Thread Starter slimjim414

    (@slimjim414)

    Hmm, where can I find that code? I’m using a theme by MEKS from ThemeForest… could I find that in the Appearance editor?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    that code should be in the table cells, where you entered the image.

    Regards,
    Tobias

    Thread Starter slimjim414

    (@slimjim414)

    Hmm, that code is added when I use the Insert Image button, and include a caption. When I remove those, the left image is slightly smaller for some reason. I’ve gone ahead and done this so you can see it.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, that’s where it’s inserted. I suggest to simply manually remove the

    style="width: 240px"

    part from each one. The images should fit better then, and they should respond to your CSS.

    Regards,
    Tobias

    Thread Starter slimjim414

    (@slimjim414)

    I apologize, but it’s still not working correctly. Here is the code from one of my table cells:

    [caption id="attachment_903" align="aligncenter" width="230"]<a href="https://www.norwaytonowhere.com/wp-content/uploads/2014/03/howto_60swoman-e1402418840848.jpg"><img src="https://www.norwaytonowhere.com/wp-content/uploads/2014/03/howto_60swoman-230x300.jpg" alt="" width="230" height="300" class="size-medium wp-image-903" /></a> Wanna know how to survive work until you travel? Or how to plan your trip? We discuss nonsense like that here.[/caption]

    Just to clarify, I would erase the first instance of “width=’230′”?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, please try removing that

    width="230"

    from all those Shortcodes.

    Regards,
    Tobias

    Thread Starter slimjim414

    (@slimjim414)

    When I removed it, the caption disappeared for some reason.

    I actually found a different solution in using a column shortcode included with my theme. Thanks for your continued support though!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, using a column Shortcode should actually be better here, as showing images side by side is not actually something that should be done using tables, in modern webdesign. So, great to hear that you found a solution!

    Best wishes,
    Tobias

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Table overflows content area’ is closed to new replies.