You may close this, thank you!

I appreciate the code Victoria. While you are correct, the code keeps the columns, that is not my objective. I do NOT want to keep the columns on iPad. I want 1 column just like the site displays on smart phones.

The reason I want this is because some of their product titles are long and when there are columns the product carousel squeezes the items together and title is overlapping the Add to cart button. Making this 1 column resolves this issue.

I apologize for not being more clear, let me know if you can assist further. Thanks.

Hi Jordan,

Would you be able to help me with which specific CSS selectors to target in my Custom CSS? I added the following css:

/* TABLET CSS */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
#top .no_margin.av_one_fifth {width: 100% !important;}
#top .no_margin.av_four_fifth {width: 100% !important;}
}

But it appears there are still 2 columns when viewing on iPad. Is it possibly occuring because I’m using a “Grid Row” with 2 cells instead of a column? Thanks in advance.

I really need this to work and at this point in development I would really like to avoid switching themes. This theme is the best theme I’ve used in the 8 years I’ve been working with WordPress. Surely someone in the development team can provide some direction? Thanks in advance.

Hi Yigit,

I appreciate the fast response, I’ve added the following code to my functions.php file:

add_action( 'after_setup_theme', 'ava_enfold_builder_layout_mod' );
function ava_enfold_builder_layout_mod(){
	add_filter('avf_builder_elements', 'avf_enfold_builder_layout_settings_mod');
}

function avf_enfold_builder_layout_settings_mod($elements)
{
	$counter = 0;
    foreach($elements as $element)
    {
// Layout > Header visibility and transparency
		if($element['id'] == 'header_transparency')  {
			/**
			 *
			 * Available Options
			 * No transparency =
			 * Transparent Header = 'header_transparent'
			 * Transparent Header with border = 'header_transparent header_with_border'
			 * Transparent & Glassy Header = 'header_transparent header_glassy '
			 * Header is invisible and appears once the users scrolls down = 'header_transparent header_scrolldown '
			 * Hide Header on this page = 'header_transparent header_hidden '
			 * MOD: Set the Layout >  Header visibility and transparency settings to "Hide both"Header is invisible and appears once the users scrolls down"
			 *
			**/
            $elements[$counter]['std'] = 'header_transparent';
        }

        $counter++;
    }
	return $elements;
}

But was unsuccessful. I tried going into Enfold > General Styling and changing the Main Background > Logo Area background to the header image used for all pages which is a step in the right direction but ultimately I’d love to mimic the same look across all pages including the individual event page(s).