Changing layout just on Mobile View - Forum | JoomShaper
Awaiting an answer SP Page Builder

Changing layout just on Mobile View

Asked by Marketing 4 years ago Last activity 3 years ago

Good Afternoon,

The main section of all our standard website pages follow same format and content is located in 2 columns. In the first row there is an image in the left hand column and text in the right hand column. This then alternates in the next row so the text is on the left and image on the right and so on.
When you switch to the mobile optimised version the content then all moves into one column in the order that it is displayed on the page, meaning that the images end up following on from each other (text, image, image, text) when we would like the format to be image, text, image, text.
Is there any way to do change this on the mobile optimised site without changing the layout on desktop view?

A good page to look at as an example is:
https://www.cloudconnx.net/stage4/solutions/connectivity/mobile
For this page on mobile view we would like the 'Technology behind mobile broadband' text block to be above the image of the mast.

Many thanks

2 replies

Oldest first Newest first Most helpful
Ariba Staff
4 years ago

Hello

Thank you for your query.

First provide a section id or class to the section - where you want to reverse text<>image position. Then use the following css rule in custom css section and change the "#custom-section" with your custom section id/class.

@media (max-width: 767px) {
    #custom-section .sppb-row {
        flex-direction: column-reverse;
    }
}
Osho Nisarga Foundation
3 years ago

This is useful, thanks!

Log in to reply.