Tab section not full width

Hi all,

This is not a support topic but a work around for those who would like to have a tab section element that is the same width as their website and not full width.

This was relatively simple to do with only a few pieces of code.

The first thing you need is your site dimensions. These are found under Theme options > General layout > Dimensions.
We’ll be using this value to force the element to have a set width. My site is set to 1300px

We now force the tab section to have the site width and then align to the middle of the screen by using
.av-tab-section-container {width:1200px;margin:0 auto;}
Why 1200px and not 1300px? Good question. As standard Enfold pads containers by 50px so content really sits at 1200px wide (1300px – 50px left – 50px right)

Job done. Well at any screen size above 1200px yes. Anything below that and the element isn’t responsive because we are telling it to display at 1200px. To get around this we need a media query for any screen below 1200px

@media only screen and (max-width: 1200px) {
.av-tab-section-container {width:auto;margin:0 50px;}
}

Here we are saying for any screen less than 1200px let the element have an auto width, basically 100% but add a margin of 50px left and right.

Not tested it extensively but so far seems to work

Maybe this can help others in the future

TJ