Add a class to tab section?

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?

https://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?

View post on imgur.com

– Freddie

https://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.

View post on imgur.com

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