Support » Plugin: Custom Product Tabs for WooCommerce » Add a class to tab section?

  • Resolved lshenefield

    (@lshenefield)


    HI! I’d like to make some space between the tabs and the thumbnail pictures on mobile. The blocks stack and they are jammed together on small screens. an I add a class to the entire thing to move it down or add padding to what selector?

    Thank you,

    Luke

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hey @lshenefield,

    Thanks for using Custom Product Tabs!

    How are you adding those tabs to your theme? On mobile I can’t see the tabs at all I’m not sure if you changed something up since you posted this.

    Cheers,
    Freddie

    Hi Freddie, no, the tabs are there. On mobile, here’s a screenshot. It’s jammed up against the little thumbnails, so I wanted to add some margin to the top. I thought maybe I could add a class to the tabs. Or, what selector would I use?

    http://www.awesomescreenshot.com/image/4366253/6229bfd9f9c428d0fba8906d54b82541

    Thank you,

    Luke

    @lshenefield,

    Sorry about that I was clicking on the description and the text below I didn’t realize those were tabs at first glance.

    Using my browsers dev tools I was able to look at your page as if it was an iPhone 5, which is a pretty small screen. I see that that part of code is laid out like so:

    – OL (Ordered List)
    – LI (List Item)
    – Image Thumbnail

    I added a red background in this screenshot to that LI element so you could see the area it is taking up a little easier. Is that the part you’d like to change the spacing on?

    https://imgur.com/a/ZlRq4nr

    – Freddie

    http://tinyurl.com/vdg4dzn

    Please see my link – the upper red rectangle has space between the main image and the thumbnails. I want space below the thumbnails and the tabs (the second red redtangle).

    If you didn’t think they were tabs, that’s a problem. How can make them look more like tabs?

    Thank you,

    Luke

    @lshenefield,

    Honestly, I think the issue is that the spacing was off so I didn’t notice because they were all stuck together. I’m attaching a screenshot of what this code will do. You’re going to want to go to Appearance > Customize > Additional CSS.

    From there just copy and paste this CSS. To adjust the width at which this code takes effect adjust the max-width part. To adjust the spacing further change the margin numbers.

    If this styling isn’t taking hold just add the !important flag after to override any css that is taking precedence. (Use this sparingly because overriding css can get hairy if you do a lot of it) Here’s an example of this:
    padding: 0 !important;

    @media only screen and (max-width: 600px) {
        .woocommerce div.product div.images .flex-control-thumbs {
            padding: 0;
            margin: 10px 5px;
        }
    }

    Let me know how this works out for you, here’s a screenshoot of what it should look like.

    https://imgur.com/a/m0qENpY

    Cheers,
    Freddie

    Hi Freddie, I’m sorry, I just was able to add a margin-top to the woocommerce-tabs class, how silly of me. I don’t need to make another new class… Sorry to take your time and thank you.

    Hi Freddie, 

    Thank you for that. Can you help me get the tabs horizontal on mobile? Two rows might be good because there are five. 
    Thank you, 

    Luke

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Add a class to tab section?’ is closed to new replies.