Update tab text to full width

  • Resolved ccredicott

    (@ccredicott)


    3 years, 1 month ago

    The “Research” tab is a tab that was created with Custom Product Tabs. The text on this tab is narrow width. I want to change it so that it’s full width, like the text under the “Description” tab. Is there any CSS I can use to change this?

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

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

  • Hi @ccredicott,

    Based on what I see for the description tab, something like this should work: 

    
.woocommerce-tabs p {
  max-width: 100vw;
  width: 100%;
}

    Our plugin doesn’t add any styling though, the only reason your description tab looks different is because it’s being explicitly targeted. The styles come from your theme.

    Let me know if that helps,
    Jon

    Thread Starter ccredicott

    (@ccredicott)

    Hey @jpowersdev –

    I added that to the Appearance –> Customize –> Additional CSS section and unfortunately it didn’t change the look of the Research tab at all. Any other suggestions or ideas? I’d love to be able to get the tabs I create in Custom Product Tabs to look the same as the default WooCommerce tabs.

    Hi @ccredicott,

    Try #primary .wc-tab p as your selector. If you inspect using your browser tools you can see that the above isn’t specific enough and it’s getting overwritten by your theme.

    Jon

    Thread Starter ccredicott

    (@ccredicott)

    That worked! Thanks for the quick reply and all the help @jpowersdev I appreciate it!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Update tab text to full width’ is closed to new replies.