[Resolved] Deactivate Responsive Design for certain pages

Hi Madera

Thanks for your support and feedback.

Can I quickly confirm the defaults we’re working with:

1. Is “Settings > Page Builder > Layout > Responsive Layout” enabled?
2. Is Appearance > Theme Settings > Layout > Responsive Layout enabled?
3. Is Appearance > Theme Settings > Navigation > Responsive Menu enabled?

To confirm, the end result you’re looking for is pages 105 and 107, those pages must be responsive in every way except columns must maintain their horizontal alignment. They must stay floated and not stack vertically. Is that correct?

Thanks 🙂

Thanks for the feedback.

The function you mentioned isn’t related to Page Builder but rather the settings component of the SiteOrigin Extras framework. As luck would have it, Ultra uses that same framework. The function is almost what you need, we just need to reverse it. How it works now is it turns OFF responsive layout for all pages except the ones listed in the array. So we just need to reverse it:

function ultra_child_per_page_responsive($val) {
	$non_responsive_pages = array(
		105, 107
	);

	global $post;
	if( is_singular() && !empty($post) && in_array( $post->ID, $non_responsive_pages ) ) {
		$val = false;
	}
    $responsivebool = true;
	return $val;
}
add_filter('siteorigin_setting_layout_responsive', 'ultra_child_per_page_responsive');

In order for the above to work Appearance > Theme Settings > Layout > Responsive Layout must be enabled. The pages contained in the $non_responsive_pages array will not adhere to this setting and won’t be responsive.

That does a few things to the theme CSS. One of them is it sets a static width for the theme container:

body:not(.resp) .container {
  width: 85.7143rem;
}

However, I think what you were after was this kind of control by for Page Builder responsiveness. To my knowledge that isn’t available yet.

What I can do is just help out with Custom CSS. Use the private reply checkbox below, send the two pages concerned and I’ll try resolve with CSS alone 🙂

Hi Madera

Great to hear from you.

Pages
That’s perfect. Use pages for static content and posts for timely content, news, blog etc.

Responsive
To confirm. Settings > Page Builder > Layout > Responsive Layout is disabled. To make certain Page Builder rows responsive we can try the following:

1. Insert the following at Appearance > Custom CSS or Appearance > Edit CSS depending on the Custom CSS plugin you are using. If you aren’t using one yet, please, install a plugin called Simple Custom CSS.

/* Page Builder Custom Classes */

@media (max-width: 780px) { 
  #content .force-responsive .panel-grid-cell {
    float: none;
    width: auto;
  }
}

Next go to a page in question and edit each row by clicking the wrench icon > Edit Row > Attributes top right. In the very first field called Row Class, insert the following:

force-responsive

The row in question should now be responsive below 780px resolution. Add to each row you’d like to make responsive.

Give this a go and let me know how you come along 🙂

Changes
No problem re: making changes to the theme. Please remember that all WordPress themes overwrite themselves during theme updates so no changes should be made directly to theme files. If you already know this then please ignore. It comes up quite a bit so I like to send reminders when applicable. If you need help making changes update safe, please, let me know. No worries re: a donation. I’ll have a premium version out in a few weeks with a additional Appearance > Customize support and a few extra features. If you’re still keen you could consider purchasing a copy. It’ll be the same as my first theme, pay what you want from $5.

Awesome 🙂 Really glad that did the trick. As you might have guessed it’s possible to adjust the mobile breakpoint by changing the max-width value in our new Custom CSS rule.

Thanks for your support. If anything comes up, please, let me know.

All the best.

Ok so assuming the row class is still force-responsive, try:

@media (max-width: 780px) {
	.panel-no-style.force-responsive {
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
	}
}