Docs

[tagmebro]

I can’t seem to get my tabs to behave correctly on my mobile site. The top tabs on my “packages” page isn’t styled correctly. U have the same setup on a different page, and it works fine on mobile. Please see http://www.tagmebro.com/packages. If you scroll to the bottom on the mobile site you’ll see the tabs look like regular text links. Take a look at http://www.tagmebro.com/booths, and if you scroll to the bottom you’ll see how the tabbed content is supposed to look.

I’ve looked through my code and checked everything I could think of, but the css styling just isn’t showing. It’s only on the mobile version of that page. I deleted the section above my tabbed content on that page, and it started to show correctly. As soon as I add any element above that section though the tabs go back to the incorrect styling again. Please help!

[Christopher]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[tagmebro]

This reply has been marked as private.

[Rad]

Hi there,

That’s quite weird, been troubleshooting it. There is no @media query either. The style is active and applied on mobile, this works but not rendered

.x-nav-tabs>li>a {
    border: 2px ridge #2ecbff!important;
    padding: 1px!important;
    margin: 5px!important;
    line-height: 60px!important;
    border-radius: 25px!important;
    color: #2ecbff!important;
    background-color: rgba(0,0,0,.50)!important;
    font-size: 32px!important;
    font-family: 'Open Sans',sans-serif!important;
    font-weight: 900!important;
    text-shadow: 1px 1px #fff!important;
}

Might be due to a browser bug. But once I changed this .x-nav-tabs>li>a to this .x-nav-tabs li a it works. Could you try that?

Thanks!

[tagmebro]

It changed the element, but I was able to target it last night to change it as well. It’s just not working as it should though. I don’t know how it could be a browser bug since the exact same element works fine on my page http://www.tagmebro.com/photo-booth. Any way to see why those tabs are working but not the packages tabs?

[tagmebro]

It also works fine on my woocommerce product pages. The description box at the bottom of my pages displays the top nav tab perfectly. There aren’t 2 tabs on those pages, but the styling is working.

[tagmebro]

It’s also working when I hide the mobile section I made. That’s how I have it now, so if you look at the site you’ll seem to believe it’s working. However, I can’t keep it this way because because the rows above this particular section aren’t optimized for mobile (on desktop they’re side by side columns with feature list, and they look way too squeezed on mobile being side by side columns).

[Rad]

Hi there,

It’s because of this

<a href="http://tagmebro.com/book-now/" <span style="color:#f9ad23; text-shadow: 1px 1px #fff;"><strong><em>BOOKING PROCESS!</em></strong></span></a>

I went ahead and fixed it to this

<a href="http://tagmebro.com/book-now/"><span style="color:#f9ad23; text-shadow: 1px 1px #fff;"><strong><em>BOOKING PROCESS!</em></strong></span></a>

Cheers!

[tagmebro]

Thanks a ton Rad! Gotta love how one small typo can lead to countless hours and frustration! I really appreciate the help.

[Thai]

If you need anything else please let us know.

[Author]

Posts