- This topic has 19 replies, 2 voices, and was last updated 7 years, 5 months ago by Andrew Misplon.
Tagged: page builder responsive ultra
- AuthorPosts
- June 3, 2015 at 7:57 pm #1674
MaderaParticipantHello,
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
June 3, 2015 at 8:08 pm #1675
Andrew MisplonKeymasterHi 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 🙂
June 3, 2015 at 9:37 pm #1676
MaderaParticipantHi 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.
June 3, 2015 at 10:02 pm #1677
Andrew MisplonKeymasterThanks 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 🙂
June 10, 2015 at 5:54 pm #1689
MaderaParticipantThis reply has been marked as private.June 10, 2015 at 6:55 pm #1690
Andrew MisplonKeymasterHi 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.June 10, 2015 at 8:04 pm #1691
MaderaParticipantHello 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.June 10, 2015 at 8:07 pm #1692
Andrew MisplonKeymasterAwesome 🙂 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.
April 18, 2017 at 4:55 pm #6303
Andrew MisplonKeymasterHi Madera
Is there a new challenge you’re working with at the moment?
April 18, 2017 at 6:03 pm #6304
MaderaParticipantHello 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!
April 18, 2017 at 6:28 pm #6305
Andrew MisplonKeymasterNo problem, let me re-look at the question. Page Builder recently shifted over to using Flexbox for layout and that might have changed things.
April 18, 2017 at 7:12 pm #6306
Andrew MisplonKeymasterOk 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; } }
April 18, 2017 at 7:41 pm #6307
Andrew MisplonKeymasterPlease, ignore the above. Use the new setting. Edit the row, click the Layout tab, use the Collapse Behaviour drop-down to select No Collapse.
April 18, 2017 at 7:51 pm #6308
MaderaParticipantThank 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?April 19, 2017 at 9:41 am #6321
Andrew MisplonKeymasterYes, 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. - AuthorPosts
You must be logged in to reply to this topic.