Table Issue In WordPress

  • Faixan

    (@famjad86)


    2 years, 11 months ago

    Hi,

    I have created a table in WordPress and assigned a red background color to it.

    The table appears fine in desktop view but in the mobile version, the background color of the first column turns white.

    Here’s a screenshot: https://imgur.com/rFGtHH9

    How I can fix this issue?

    I’m using:

    Gutenburg

    Theme: Generatepress

    Thank you

    • This topic was modified 2 years, 11 months ago by Faixan.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    2 years, 11 months ago

    Please provide a link to a page on your site where we can see this. Thanks.

    Thread Starter Faixan

    (@famjad86)

    2 years, 11 months ago

    Thank you for responding, here is the post URL:

    https://kitchenhanker.com/best-stainless-steel-air-fryer/

    • This reply was modified 2 years, 11 months ago by Faixan.
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    2 years, 11 months ago

    Weird, but that’s how your theme does tables. This is the CSS involved:
    @media screen and (max-width: 600px) {
    tr td:first-child {
    background: #f0f0f0;
    font-weight: bold;
    font-size: 1.3em;
    } }

    The fix is to add this custom CSS:

    @media screen and (max-width: 600px) {
    tr td:first-child {
    background: #e13d2e;
    font-weight: bold;
    font-size: 1.3em;
    } }

    To add or override CSS: use the “Additional CSS” option in the customizer.  https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress or at [site]/wp-admin/customize.php if you don’t have that menu option.

    Use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.

    Thread Starter Faixan

    (@famjad86)

    2 years, 11 months ago

    Bundle of thanks Steven Stern. It worked !

    But it gave birth to another issue.

    This thing is applied to all the tables on the page whereas i want to limit this thing to the mentioned table only.

    For reference you can check the 2nd table in the same post. You will find it underneath first H2 heading. This table is added via Affiliate Booster plugin.

    • This reply was modified 2 years, 11 months ago by Faixan.
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    2 years, 11 months ago

    I recommend asking at https://wordpress.org/support/theme/generatepress#new-post so the theme’s developers and support community can help you with this.

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

The topic ‘Table Issue In WordPress’ is closed to new replies.