Hi,
I am using SiteOrigin Page Builder in WordPress on Tyler Moore’s Tesseract Theme.
On the site that I am building my ‘Services’ page has a series of rows each with two columns. I am using text and pictures alternating in columns down the page. As a responsive layout is it possible to I set the priority of the columns for stacking in mobile view? At the moment in mobile view I am seeing text, picture, picture, text, text, picture, picture, text, etc instead of text, picture, text, picture, text, picture. i.e. it will always stack the left column first.
Thanks in advance,
Paddy
Hi Paddy
Thanks for using Page Builder.
It’s unfortunately not possible to set the responsive collapse order of cells. I’ve marked this thread as a feature request. We use these when adding new features.
Sorry I don’t have better news at the moment.
Is there an update to this request? Has anyone discovered a way around this? I live for your workarounds.
1) Add a custom class to any rows you want this implemented on. For instance: mobile-reverse
2 ) Use jQuery to add a unique class name to the first & second cells of the row:
jQuery('.panel-row-style .panel-grid-cell:nth-child(1)').addClass('first-cell'); jQuery('.panel-row-style .panel-grid-cell:nth-child(2)').addClass('second-cell');3) Use jQuery again, to go loop through each row, looking for rows with the class .mobile-reverse, then putting the second cell before the first cell
jQuery('.panel-row-style.mobile-reverse').each(function() { jQuery('.panel-row-style.mobile-reverse.mobile-reverse .second-cell').insertBefore('.panel-row-style.mobile-reverse .first-cell'); });4) Wrap all of this in a jQuery Window ready function, just in case the JS from pagebuilder isn’t complete yet (i.e. on Document ready).
jQuery(window).load(function() { jQuery('.panel-row-style.mobile-reverse').each(function() { jQuery('.panel-row-style.mobile-reverse.mobile-reverse .second-cell').insertBefore('.panel-row-style.mobile-reverse .first-cell'); }); })I recently needed this as well, because those alternating block layouts don’t work so well on mobile. Let me know if you have any issues.
Sorry, there is a mistake in the code, but I cant edit it. In the jQuery snippet, the class .mobile-reverse.mobile-revers should only appear once, not twice in a row.
To correct the mistake in the jQuery code above, here is the correct code:
Assuming you have added a custom class of ‘mobile-reverse’ to any rows you want the effect applied to, and are using some PHP code to detect a mobile browser:
jQuery(window).load(function() { jQuery('.panel-row-style .panel-grid-cell:nth-child(1)').addClass('first-cell'); jQuery('.panel-row-style .panel-grid-cell:nth-child(2)').addClass('second-cell'); jQuery('.panel-row-style.mobile-reverse').each(function() { jQuery('.panel-row-style.mobile-reverse .second-cell').insertBefore('.panel-row-style.mobile-reverse .first-cell'); }); })Greetings ChrisH.
This is very handy, and I would like to implement it, but it would seem my coding experience is below intermediate.
Would you be so kind as to include a little more detail on how exactly to implement this workaround? I’ve gotten as far as adding the mobile-reverse class to the affected rows, but have no idea where I should be putting your jQuery code. Pardon my amateur skillset.
Thanks in advance.
Hi jdlrc
Unfortunately, nothing yet from Page Builder.
ChrisH, thanks for your contribution, that’s fantastic.
@jdlrc the above solution is intermediate in nature. Proceed if you feel comfortable working at this level.
If you have instances where you’d like to turn off column collapse in a specific row, please, send me a link, that I can help with using CSS.
@ChrisH, thanks so much for the workaround!
This is a private message.
Hi jdlrc
Can you perhaps open a new thread and post the link here once open. I’ll do my best to help out.
Thanks
Sure thing. Thanks.
Hi Paddy,
Maybe not the perfect solution, as I would also like the ability to easily stack elements in the order I want them, but I think you should be able to use CSS @media to achieve your goal. I did something similar on http://www.BeckerGraphite.com.
I didn’t want all six front page “banner” images to load on mobile devices. I just wanted one image to load when responsive kicks in at smaller screen sizes. So if you check out that site on a desktop vs a phone, you’ll see that the “banner” image strip shows up only on desktops while on a phone, only a single image shows up.
I used @media in the Custom CSS and assigned a class for screens larger than 800px and a different class for screens smaller than 800.
On the entire front page row of six images for desktop/laptops, I assigned the class “smallscreen-nodisplay” and used display: none; if the screen was less than 800px.
@media (max-width: 800px) { .smallscreen-nodisplay {display: none;} }Then I put in a second image, a single image, and actually moved it down a few rows so it would stack differently on small screens. I assigned the class ” bigscreen-nodisplay” to this row, again using CSS “display: none;” for this class.
@media (min-width: 800px) { .bigscreen-nodisplay {display: none;} }So look at http://www.BeckerGraphite.com on both phone and desktop and you’ll see what I’m talking about. You could do something similar by duplicating images into their own single-column rows and then having that entire extra row display only on small screens and then assign a different class to the cell with the image in original row (with 2 columns). This different class for the cell containing the image would then display only on larger screens.
Wow, I feel like this is twisting my brain into a pretzel. I worry I didn’t explain it well, but I know it works. If you’re dealing with a relatively small number of instances where you want to reorder the stack, this might be your solution. But if you’re talking dozens and dozens of rows, then this might be tedious. Anyway, I hope this helps!