Tab Issue on Mobile Device

Hey Shiv722,
Sorry scrolling tabs is not an option right now, Please feel free to request – or vote if already requested – such feature on Enfold feature request form.
But I wrote some code to help :)
This is for tablets to bring the tabs closer together:

@media only screen and (min-width: 768px) and (max-width: 1023px) { 
#top .av-section-tab-title {
    padding: 0px !important; }
#top .av-tab-section-tab-title-container .av-section-tab-title {
    padding-right: 10px!important;
}}

This is for mobile to center the tabs and bring them closer:

@media only screen and (max-width: 767px) { 
.av-tab-section-tab-title-container.avia-tab-title-padding-default {
left: -200px !important; }
#top .av-tab-section-tab-title-container .av-section-tab-title {
    padding-right: 0px!important;
}
#top .av-section-tab-title {
    padding: 0px !important; }}

As for your TM, I removed the span style and added a span class and wrote this css for mobile and desktop:

.tm {font-size: 40px !important; }
@media only screen and (max-width: 767px) { 
.tm {font-size: 20px !important; }}

adjust to suit :)

Best regards,
Mike

Hi,
Do you mean “PROTECTING INGENUITY” try this:

@media only screen and (max-width: 767px) { 
.av-special-heading {width: 10%!important;}}

Sorry I was unable to find a solution for the second part.

Best regards,
Mike

Hi,
Opps, try this

@media only screen and (max-width: 767px) { 
.avia-builder-el-1.av-special-heading {width: 10%!important;}}

Best regards,
Mike

Hi,

Thank you for the update.

1.) Is it working if you remove the previous css modifications?

2.) Please use the following css code to adjust the focal point or focus of the background image.

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  #bg1 {
      background-position: 50% 50% !important;
  }
}

Adjust the position value as needed.

Best regards,
Ismael

Hi,

No i did not disable them. The tab content will slide, however the issue i have is that in a vertical position on an iphone, the Titles of my tabs are cut off. I used the code above to try to fix tis, however, i still have this issue.

1. )The tabs are cut off because of the previous css modifications. Please remove those then purge the cache or hard refresh the page.

2.) I forgot to mention that you need to edit the color section and apply a Section ID to it. Use “bg1” for example then use the following css code.

@media only screen and (max-width: 989px) {
  /* Add your Mobile Styles here */
  #bg1 {
      background-position: 50% 50% !important;
  }
}

Set the background repeat to “Stretch to fit”.

Best regards,
Ismael