My website has “Rows” with 2 columns. By default, when the window is resized (or on the mobile), the left columns will be on the top of the right columns.
How to switch that order? I want the right column to go on top of the left one.
My website is http://socialagent.staging.wpengine.com/ and I’m specifically talking about section 2 below the fold (“Make Social Introductions & Referrals”) and section 4 (“Track your introductions”).
Hi Maurice
Thanks for reaching out.
This, unfortunately, isn’t possible from within Page Builder at the moment. I’ve marked this thread as a feature request; thanks for your feedback. We run through these threads when looking for ideas for updates.
I was thinking more in terms of manipulating the Row with CSS. Isn’t there a way to do it with code?
Sure, let me take a quick look.
Edit the row, click Attributes top right, assign a class of:
Add the following to a Custom CSS field or plugin to target:
@media (max-width: 780px) { .mobile-control .panel-grid-cell { float: left !important; padding-right: 30px !important; padding-left: 30px !important; width: 50% !important; } }No elegance there. We’re just manually setting values back to what they were before.
Is it a Row class or Cell class that I should use? I’m already using Row class for a parallax background plugin. I’ve pasted your code (yep, I did use the SiteOrigin’s Custom CSS) and used the Cell class but it didn’t work (I’m making changes to http://socialagent.wpengine.com/ this time).
Could I use 2 classes in the Row class if that’s the one I’m looking at?
Try using two row classes, just leave a space after your parallax class and then add our new one
If there are issues with that then try adding to the cell class field instead.
Thank you, it works! But not exactly how intended though.
Now none of the columns go up or down when resizing – they both stay in the same row. And the smaller the width (the more I resize), the smaller the image becomes:
http://screencast.com/t/bpHGNjdI
Sure.
Now none of the columns go up or down when resizing – they both stay in the same row.
Perhaps we can explain your request again and I’ll take another look. We’ve reversed the responsive behaviour that takes columns and makes them 100% and non-floated below a certain resolution. My understanding was that this is what you wanted to do.
And the smaller the width (the more I resize), the smaller the image becomes:
That’s expected. Almost all themes set their images to have a 100% width, this means that as the container gets smaller so does the image.
I just wanted the right column to go on top of the left one below certain resolution. (rather than left one going on top of the right one – the default behavior).
Sorry, I’m not really sure how we’d do that without complicated CSS. The way responsive layouts work matches the actual document flow. The right column drops below the left and if you view the source, the right column comes after the left column, in all resolutions. To put the right above the left we’d need to display the reverse of the document flow.
Ref: http://onwebdev.blogspot.com/2011/01/css-understanding-document-flow.html
Ok, thank you very much for a clear explanation. Is there a way to toggle on a background (tiled image) for an HTML widget only when on mobile?
Unfortunately, no way at the moment. You’d need to use media queries.
If you send through all the details such as the URL of the background, the page link, the block I must look etc. I can try help.