Tabs container has uneven padding

[Jennine]

Hi there, I’m hoping to get some help troubleshooting uneven padding inside a tab container in XTheme. I’m working with a section that uses the x-tabs element, and on mobile view, the content inside one of the tab panels ( div#panel-e6965-e9.x-tabs-panel.x-active ) has inconsistent left and right padding. The inspector shows padding: 21px on the container, but the spacing still looks uneven, and I can’t seem to directly target it. please advise. here is the url: https://www.statenislandda.org/our-efforts2/

[ruenel]

Hello @Jennine,

Thanks for writing in! I want to check your element settings, like the Width and Maximum Widths. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[Jennine]

sure. attached

[ruenel]

Hello @Jennine,

Please make sure that the width and maximum width of the Global Container of the Row elements inside the Tab are set to this:

Kindly purge the cache after making the changes before testing the site again.

Hope this helps.

[Jennine]

So do I need to do this for every row?

[ruenel]

Hello @Jennine,

Yes, it needs to be consistent. It is either using the Global Container or setting the values to 100%. If you mix them both then the paddings will not be consistent.

Cheers.

[Jennine]

i changed all the rows to have a global container however the problem still persists. Please advise. Thank you

[tristup]

Hi Jennine,

I have checked the page on a mobile device and found the spaces are even on both the left and right sides. While checking the settings, I found that the Padding is set to Tabs and Panel both for the right side.

As it is a live site and working, I didn’t change to investigate it further. If you still want us to investigate, please copy your live site to a staging server so we can troubleshoot freely without breaking your live site.
And give us access to the secure note, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks