Tabs - Content width

Hi,

I want to have my content inside the Tabs to use 100% of width, so no padding.
What is the CSS for that?

Thank you

Hi @PanInternational,

You will need to go to the Tab in question and scroll down the options to find the Class options and add the class of: no-padding:

Then you can go to X > Theme Options > CSS and add the CSS code below:

.no-padding.x-tab-content .x-tab-pane {
    padding: 1%;
}

You can change 1% to whatever value like.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

Hi,

Thank you for your feedback.
Unfortunately that didn’t do the trick.

Any other solution?

Thank you

Hi @PanInternational,

The problem you have in your case is that you used the Global Block to add the content of the Tab. Now there is a margin in the section and row settings of the global block which is causing the issue and not the main padding of the tab which I was talking before.

Go to the section and Row settings of the global block which you added and set the margin to 0. For more information click here.

Thank you.

Hi,

Thank you for your reply.
That makes sense, the problem is that my margins/paddings (left and right are already set up to 0 (auto) in the global block.

What’s next?

Hi @PanInternational,

I found the problem cause. I went to the global blocks and clicked on the Row options:

Then, I disabled the Inner Container option there:

Now if you check the front end of the website you will see the margin in question is gone:

Thank you.

Perfect! :slight_smile:

Thank you