Erika Jones-Clary

You might consider repeating the title above your PDFs. The way the tab is breaking for me is right below the tab. For consistency, you’ll want to add it to the images section too. Add a CSS span style so that the repeated title only appears on Mobile if the repetition bugs you.

or … Add “Company Profile” to the beginning of the link titles. ie

“Company Profile – WiGS Sarah Coleman”

— consider a “back to top” plugin or quick link at the bottom of Tabby … ?

• This reply was modified 3 years, 7 months ago by Erika Jones-Clary.

I can see both tabs (after selection) and content on mobile, Apple ios 14.4 Chrome and Safari. I had to scroll up though after I clicked the second tab.

• This reply was modified 3 years, 7 months ago by Erika Jones-Clary.

You’re welcome!

I have achieved this with pure CSS – you can see it in action on this page: https://sfciti.org/meet-the-new-san-francisco-board-of-supervisors/

Each action per tab can be styled. Each tab has a number associated. On the above example, the “District 2” tab ID is “tablist1-tab1”

I use TABBY on a lot of different pages so I also use body.page in addition to the styles. The CSS I use for tab1:

body.page-id-19386 li#tablist1-tab1.responsive-tabs__list__item
body.page-id-19386 li#tablist1-tab1.responsive-tabs__list__item:hover

and

body.page-id-19386 li#tablist1-tab1.responsive-tabs__list__item.responsive-tabs__list__item–active {
background-image: url(https://149503084.v2.pressablecdn.com/wp-content/uploads/2018/12/Stefani_off.jpg) !important;
background-position: top;
height: 175px;
background-repeat: no-repeat;
color: transparent;
border: none;
white-space: normal;
max-width: 175px;
}

You’ll also need to tweak some of the defaults:

body.page-id-19386 .responsive-tabs__list__item { min-width:175px ; }
body.page-id-19386 li.responsive-tabs__list__item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;

}
body.page-id-19386 .responsive-tabs .responsive-tabs__list__item { padding:0 !important; margin:1px 3px 0 0!important; }

You’ll see that the CSS hides the text but it still lives there which is handy. On mobile you’ll also need to adjust the CSS and style.

Hope this helps!

Can you clarify? I thought I was using the core functionality of the plugin. I’m not sure how to proceed.

• This reply was modified 5 years, 9 months ago by Erika Jones-Clary.

Thank you. Pardon the delay. I’ll keep an eye on your reply. We’re using it here
https://conservatoryofflowers.org/140years/

You can see after the LOAD MORE the images won’t load as lightbox.

This was perfect thank you. I was able to echo the shortcode so I could add the tab information within my product description. Appreciate the quick reply.