Widget row order/formating on Mobile

Hi there

I have set up pages on my site that have alternating widgets in separate rows to create a zig zag format.
i.e:
row 1, text in column 1, an image in column 2.
Row 2, an image in column 1, text in column 2
Row 3, text in column 1, an image in column 2 e.t.c.

This works great on the desktop version, but on the mobile when it stacks the widgets into one column, I end up with Text, Text, Image, Image, Text, Text, Image image etc. I would like it to be Text, Image, Text, Image, Text, Image, etc, or simply not have the images display on the mobile version.

Is there a way tto get the widgets to display in the method explained above? Is there also a way to hide images on the mobile version? See my site below for context

https://projects.website.mashtrust.org.nz/child-youth-crisis-respite/

Regards,
Makho

Hi Makho,

Yes, that is normal behavior for all page builders, and columns will be stacked one below the other on smaller screens. This can be changes with some css code but since this is custom work I’ll explain how this should be done for that page only.

It would be best to add custom row class for each row where you want to invert columns like for example reverse_order and then to use it to target all columns inside https://www.screencast.com/t/lo3goNS2 , but since each row has its own unique ID and class according to that class then you can also inspect each row and to target inner columns according to it. For example first row have ID and inner div has class according to it https://www.screencast.com/t/pM3Xn0PgbGb so code should go like this:

@media (max-width: 768px) {
    .panel-row-style-for-90-0 {
        display: -webkit-flex !important;
        -webkit-flex-direction: column-reverse !important;
        display: -webkit-flex !important;
        display: -webkit-flex !important;
        display: flex !important;
        -ms-flex-direction: column-reverse !important;
        -webkit-flex-direction: column-reverse !important;
        -ms-flex-direction: column-reverse !important;
        -webkit-flex-direction: column-reverse !important;
        flex-direction: column-reverse !important;
    }
}

Since every second column needs to be reversed you need to inspect 3rd one and to append its class to provided css like this:

@media (max-width: 768px) {
    .panel-row-style-for-90-0,
    .panel-row-style-for-90-2 {
        display: -webkit-flex !important;
        -webkit-flex-direction: column-reverse !important;
        display: -webkit-flex !important;
        display: -webkit-flex !important;
        display: flex !important;
        -ms-flex-direction: column-reverse !important;
        -webkit-flex-direction: column-reverse !important;
        -ms-flex-direction: column-reverse !important;
        -webkit-flex-direction: column-reverse !important;
        flex-direction: column-reverse !important;
    }
}

And you can see result in this short video https://www.screencast.com/t/gKSmjwxC .

It would be best to apply the code from Appereance > Widgets > Additional CSS field.

Best Regards!

Hi again

That worked perfectly! Thank you! I went through and just added the custom classes for each row on each page then used the classes instead of individual row IDs.

I do have one more question, is there an easy way to remove images on mobile for select rows either using the row ID or custom class? there are some pages that are just too long with images mixed in there and I want to be able to remove them, preferably using custom classes as it makes for cleaner code.

Regards,
Makho

Hi again Makho,

Yes, you can target existing row IDs or classes and then target some image within holder by using direct child selector https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors or if there are more images within same div and you want to remove just some of them you can use nth child https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Example for one of your section on that page would go like this. Since section contain just one image inside you can use almost top most div and target all images inside https://www.screencast.com/t/V7fY5oosox9i , and here is the code:

.panel-row-style-for-90-0 img {
    display: none;
}

Off course if you want to remove image just on mobile use media rule for devices screen resolutions on which you want images hidden https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries . To target all device below iPad portrait resolution you can use code below:

@media (max-width: 768px) {
    .panel-row-style-for-90-0 img {
        display: none;
    }   
}

In same way like in previous explanation you can add some unique class for this purpose for example hide-mobile-img and use it in your css.

Bests!

Amazing! that worked beautifully. The Sydney theme is an amazing theme that is well built, and the support is even better. The way you have explained everything including screencasts is just so simple it’s nearly impossible not to understand.

Thank you for all you assistance
Regards,
Makho

You’re welcome Makho,

And thanks for using our theme.

All the Best!