-
Posts
-
Hi,
I am using the tabs shortcode with the labels on the left with border. When checking it on a mobile phone I see that the borders of the bottom labels are broken.
Any idea how I can fix this?
Hi,
Do you mean this – right and left side? http://www.clipular.com/c?5530312=vJfGqdybIzPZGZoWNvFB0B21MK0&f=.png
Thanks,
Nick
Hi ,
I don’t have a smartphone so please try each of these to see what it looks like
Option A:
Please add this to your /css/custom.css or Quick CSS located in Enfold > Styling on the bottom of the page
@media only screen and (max-width: 767px){
.responsive .tabcontainer .tab.fullsize-tab {
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(225, 225, 225);
border-right-width: 1px;
border-right-style: solid;
border-right-color: rgb(225, 225, 225);
}}Option B
open up /css/shortcodes.css and find line 627 that looks like
{width:100%; max-width:100%; border-left:none; border-right:0;left:0; top:0; min-height: 0!important;}replace that with this line
{width:100%; max-width:100%; min-height: 0 !important;}and add this css to Quick CSS
@media only screen and (max-width: 767px){
#top .active_tab_content {
border-right-width: 0px !important;
}}Thanks,
Nick
Hi Nick,
Option A did not work.
With option B the left border is missing. See screendump.
http://www.clipular.com/c?5508074=Wl9wbJz6FOKX6h24VfRBVHyv05Y&f=.png
Hi,
I’m not sure if this is going to work but please add this on your custom.css
.noborder_tabs.sidebar_tab_left .tab {
border-left: 1px solid #E1E1E1;
}Regards,
Ismael
- The topic ‘Tabs responsive issue’ is closed to new replies.