section full width

Hi,
Thanks for your patience and the login, I believe that you want the column at the bottom of tab one, with the image and button to be full-width and only show when tab one is active
To test I created a new test page, linked below, and moved the column outside of the tab section, then I added this css to your child theme stylesheet:

#top.page-id-13305 #after_tab_section_1 > .container {
    max-width: 2500px;
    padding: 0;
}

and this script to your child theme functions.php

function custom_script() { ?>
    <script>
(function($){
	setTimeout(function(){
    if ($('#top.page-id-13305 #av-tab-section-1 .av-tab-section-tab-title-container').children('a[aria-controls="av-tab-section-1-1"].av-active-tab-title').length === 0) {
    	$('#top.page-id-13305 #after_tab_section_1').css({"display": "none"});
    }
	},500);
	 $('#top.page-id-13305 #av-tab-section-1 a.av-section-tab-title').on('click', function() {
	 	setTimeout(function(){
	 	if ($('#top.page-id-13305 #av-tab-section-1 .av-tab-section-tab-title-container').children('a[aria-controls="av-tab-section-1-1"].av-active-tab-title').length > 0) {
    	$('#top.page-id-13305 #after_tab_section_1').css({"display": "block"});
    } else {
    	$('#top.page-id-13305 #after_tab_section_1').css({"display": "none"});
    }	
	 	},500);
	 });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

both of wich will only work on the test page page-id-13305
please clear your browser cache and check if this helps.

Best regards,
Mike

Hi,
Please try clearing your browser cache following these steps for Safari and note step 4 where you will Clear the History.
It is showing full width for me, please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
If the images that you want full-width must be inside the tab section, then you would need to make the whole tab section full width, please clear your browser cache and check the test page below.
Now if you want the text areas “boxed” like before we can set a max-width for them, but for the 8 columns they can not be nested inside another column so we would need to convert them into shortcode and place them inside a code block, but since you are not done editing them yet it probably would not be easy for you in the future.
So the option is to use the whole tab section full width like on the test page below (clear your cache) or finish your image columns so they can be converted into shortcode for a code block section.

Best regards,
Mike

Hi,
Thanks, I’m not sure what happened but I saved the page again and now it is full width again. Please clear your browser cache and check.

Best regards,
Mike

Hi,
For example, I took the shortcode of the contains of tab 3 and placed it in a code block element with the custom class inner-tab-section-width and added this css to your child theme stylesheet.

#top.page-id-13305 #full_width_tab_section .inner-tab-section-width {
    max-width: 1200px;
    margin: auto;
}

Please clear your browser cache and check.
You can use the same custom class inner-tab-section-width for all of your tabs contents that you want to be “boxed”

Best regards,
Mike

Hi,
Glad to help, shall we close this then?

Best regards,
Mike

Hi,
Thanks for the screenshots and example, the issue was that all of the columns were in a color section, in this case the columns need to be inside the code block as the wrapping div and not nested.
I corrected it for you, please clear your browser cache and check.

Best regards,
Mike

Hi,
Very good, this thread is getting quite long, shall we close this then?

Best regards,
Mike

Hi,
I couldn’t find the page you took the screenshots from so I tried adding the elements to the test page and it seems to work well, please check.
This element really wasn’t designed to work with the layout that you are trying to achieve, as you recall at the beginning of this thread we wrote a script to try to achieve this, but since you are having such trouble with this, perhaps a different layout is in order?

Best regards,
Mike