Table and shortcode widths stretch across whole page

  • Resolved expquest

    (@expquest)


    3 years, 4 months ago

    Page password: tableHelp

    Hello,

    Regular tables and Shortcode Ultimate tables/tab groups stretch to the full width of the page on blog posts. Any idea why this is happening and how to fix it? The rest of the post content, namely paragraphs, headings, separators, and lists stay within the post’s set width.

    I’m using OceanWP theme. I have single blog pages set to full width (NOT 100% width), meaning no sidebar. I also tried setting it to contained and the tables stretched to the full extent contained would allow (still beyond the post content).

    In the editor, the table appears to be a normal size. I do not have wide width toggle on the table.

    I don’t have any custom CSS that would affect tables. Just #footer-widgets tag colors.

    Screenshot: https://prntscr.com/19v93ic

    Thank you!
    Sarah (ExpQuest)

    The page I need help with: [log in to see the link]

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

  • In your page, the first table has width: 100% from the block library CSS.
    The second table has width: 100% !important from the shortcode plugin CSS.

    You can make an issue in the Gutenberg repository (or a core Trac ticket) that the table block width doesn’t match from back end to front end.

    You’ll have to ask at the plugin’s support forum for changes to their CSS. Be sure to mention that if they use !important than the user has to also and it makes things very messy.
    https://www.ads-software.com/support/plugin/shortcodes-ultimate/

    Thread Starter expquest

    (@expquest)

    Thank you @joyously. Do you think this is an issue with the theme OceanWP or with the blocks themselves? It effects everything from pullquotes to the standard table to plugins like Shortcodes Ultimate and Ultimate Blocks.

    I was able to visually correct the issue by setting .single .entry-content to width: 72% (matches the theme’s set content width) and margin: auto to center it.

    .single .entry-content {
    margin-bottom: 20px;
    width: 72%;
    margin: auto;
}

    I didn’t see any width from the theme CSS affecting the table, when I looked.

    Thread Starter expquest

    (@expquest)

    Turns out the width was affecting all the normal elements like p, headings, separator, regular quote, etc. The theme was limiting the content + comments section width to a set (configurable) value of 700 pixels. The theme CSS did not include things like tables within that constraint. I updated the Additional CSS section to alter the elements affected by that 700px limit and made all content uniform. Now tables don’t overflow past the p, heading, etc content.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Table and shortcode widths stretch across whole page’ is closed to new replies.