[Resolved] Deactivate Responsive Design for certain pages

This topic contains 19 replies, has 2 voices, and was last updated by  Andrew Misplon 1 year, 3 months ago.

  • Author
    Posts
  • #1674

    Madera
    Participant

    Hello,

    First, let me thank you for that wonderful theme, its working very well.
    I am using the SiteOrigin Page Builder and deactivated the “responsive design” in their settings, which allows me to put several pictures horizontally next to each other using rows on mobile devices.
    If I would activate responsive design, those pictures would be listed vertically with only one in a row.

    However, for some pages with text, I would prefer the vertical design. I checked on the SiteOrigin website and they recommend to use this code in the functions.php file to deactivate “responsive design” on only certain pages:

    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 = true;
    	}
        $responsivebool = true;
    	return $val;
    }
    add_filter('siteorigin_setting_layout_responsive', 'ultra_child_per_page_responsive');

    105 and 107 are page IDs.

    This is working, but it is not having the same effect, as it would be if i deactivated the “responsive layout” checkbox in the settings menu. Instead, the responsive menu is disappering as well.
    Do you know any way to achieve a responsive layout only for the content of certain pages, but keeping the menus responsive on mobiles throughout?

    Thanks

    Madera

    #1675

    Andrew Misplon
    Keymaster

    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 🙂

    #1676

    Madera
    Participant

    Hi Andrew,

    thanks for your reply, you are absolutely correct, except 1 is disabled.

    2 and 3 are enabled. That way, everything is in horizontal alignment, which is correct for most pages.
    For page 105 and 107, I would like a vertical alignment though (1, 2 and 3 enabled).

    That code I posted above is affecting the whole website. The pages will look like on a desktop that way.

    By the way, that “$responsivebool = true;” in the code has no effect, I was just trying something out, I should have deleted it.

    #1677

    Andrew Misplon
    Keymaster

    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 🙂

    #1689

    Madera
    Participant
    This reply has been marked as private.
    #1690

    Andrew Misplon
    Keymaster

    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.

    #1691

    Madera
    Participant

    Hello Andrew,

    It is working, thanks a lot! It’s even better than I expected as I can now control individual rows.
    Will purchase a copy when it comes out. I like the way how you handle the support. Happy users will reward it.

    #1692

    Andrew Misplon
    Keymaster

    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.

    #6303

    Andrew Misplon
    Keymaster

    Hi Madera

    Is there a new challenge you’re working with at the moment?

    #6304

    Madera
    Participant

    Hello Andrew,

    I just noticed that after some theme update from 2.2.2 to 2.2.4 (or maybe a Page Builder update?) your previous fix to my problem is not working anymore. Before, I was able to make certain Page Builder rows responsive with a custom css. This does not work anymore. Do you know any solution? Thanks a lot!

    #6305

    Andrew Misplon
    Keymaster

    No problem, let me re-look at the question. Page Builder recently shifted over to using Flexbox for layout and that might have changed things.

    #6306

    Andrew Misplon
    Keymaster

    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;
    	}
    }
    #6307

    Andrew Misplon
    Keymaster

    Please, ignore the above. Use the new setting. Edit the row, click the Layout tab, use the Collapse Behaviour drop-down to select No Collapse.

    #6308

    Madera
    Participant

    Thank you, it is not working unfortunately, there is no change whether it is set to “No Collapse” or “Standard”.
    I have removed all the @media code from the custom css, is that correct?

    #6321

    Andrew Misplon
    Keymaster

    Yes, that’s correct. Please, can you send me a link to a page with a row that has No Collapse set and also confirm which row I must check, I’ll troubleshoot from there.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

Scroll to top