tabs on mobile and responsive buttons on mobile

[karhas]

Hi Radu and Laura,

I am having trouble with the Kleo Tabs on mobile showing what content belongs to which tab (testing on an Android Note 3, Galaxy 7 and iPhone 5s and 6)  I set up a test here: http://girlsgo.us/test-tabs/  http://girlsgo.us/wp-admin/post.php?post=12430&action=edit

This is one of the pages where the tabs are confusing to users.  When I click on the button to load the content from “Students,” there is no way to identify if the content is for “students” or  “professionals” because of how the content toggles and how the active tab shows. The tab color change is almost indistinguishable as both tabs, the active and non-active tab look nearly the same color. Is that an Options setting that I am missing? I am hoping to get all tabs to remain on top of the content and clearly indicate what content is being served during the toggle like in the sample below.

Here is an example of a tab module that works great on mobile that is from one of my other sites:

I use a tab element here http://hempfieldkiva.org/join-hempfield-kiva-club/ or low on the page at http://hempfieldkiva.org/member-toolkit/. On mobile, the tabs remain stacked at the top of the sections and  clearly highlight the active tab so users can tell what content below matches the tabs. By seeing all of the tabs at the top, the users see that other tabs exist and what content matches.

Here is a login if you’d want to take a look at how their tab code functions?

http://hempfieldkiva.org/wp-admin/

support4hk

ABa!@6*4wVvyxGOt9PwBTbCO

In the tabs setting, this link doesn’t work: Enter section ID (Note: make sure it is unique and valid according to w3c specification). I am not sure if I can rename the number ID to a unique word ID for the tab.

_______________

Separately, if you look at my homepage on mobile, the button is not responsive. Do I need to create two separate buttons at different sizes? If you want to also look at the buttons on my other site, the buttons adapt responsively. I don’t know if there is a simple fix to make buttons be responsive on Kleo or if I am doing buttons wrong on my Kleo / GirlsGo.us site?

Could the script or CSS here be a solution? http://stackoverflow.com/questions/20902400/how-to-make-custom-css-button-responsive

Thanks much for all of your help. Have a great one! Karen

 

[Laura]

Not marked as solution

[Radu]

Not marked as solution

[Author]

Posts