Solved SP Page Builder

Module and Content Order on Mobile

Asked by SPD 3 years ago Last activity 3 years ago

Hi,
Is it possible to control the order the modules and content loads. I know I can change the order for a specific position but in my home page I have modules in Position Left and Right and of course Content. Currently the Modules on the left are shown 1st on mobile, then Content, then Right.

What I really need is Content > Left > Right. The modules are just SP PB Module and textboxes in case that matters

I did test this on Cassiopeia and the Content was alwasy lists 1st

Test site below. I just used Chrome Inspect and switched to mobile view

Edit: An additional question, and I hope I am missing something obvious but when in Mobile View (double-checked on mobile) the sizes of my Modules are different but only in mobile view. In the ones with Bkgd Color (Row, Column, Textbox) I have checked for any additional padding/margins and can't see any difference. Basically the top two (About Site and Authors) seem to have a Column left margin or Row Left padding, while last doesn't have either. But that doesn't seem to be the case from what I can see

Edit 2 Applogies for edits. I have found the code that is giving me that padding in the 2 modules above but I have no idea where it is comming from and to be honest that is the effect I want in the last module but no idea where to set it. Basically the 3rd module (Contributors) does not have this line and I want it to. :-)

@media (max-width: 767px)
.sp-page-builder .page-content #section-id-1659872645302 {
    padding-left: 10px;
}

Test site so others can see is they want. https://rctest.piningforthefjords.co.uk/

Accepted answer

Marked as the solution
Rashida Rahman Staff
3 years ago

Hi there!

Thanks for your query.

You may use the following code in your custom CSS to get your desired order in your smaller device screen:

@media (max-width: 991px){
main#sp-component {
    order: -1;
}
}

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards

2 more replies

Oldest first Newest first Most helpful
SPD Asked this
3 years ago

Thanks that did fix the problem

Rashida Rahman Staff
3 years ago

Glad that it helped:)

You are always welcome and thanks!

Log in to reply.