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

@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

@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