mobile Mobile view stacking page content in wrong order

Site URL: https://www.josarsby.com/all-clients

So this page has been arranged so that content is listed alphabetically which is fine on desktop/tablet view however when viewed from mobile device the content is stacked as if the two columns are on top of eachother and no longer in order.

I've seen previous fixes for this on other templates using code to make the columns side by side on mobile view and this could be the right solution. Is there a fix for this?

Thanks

Add to Design > Custom CSS

/* all-clients mobile */
@media screen and (max-width:767px) {
div#block-e469ca92430b25cddc8d+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
div#block-e469ca92430b25cddc8d+.row .span-6 * {
    font-size: 14px;
}}

Thank you that's almost perfect, the last two clients on the page seam to be full width though still. Can I fix this myself or does it need different code? Thanks

On 4/22/2022 at 9:15 AM, tuanphan said:

Add to Design > Custom CSS

/* all-clients mobile */
@media screen and (max-width:767px) {
div#block-e469ca92430b25cddc8d+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
div#block-e469ca92430b25cddc8d+.row .span-6 * {
    font-size: 14px;
}}

 

Thank you that's almost perfect, the last two clients on the page seam to be full width though still. Can I fix this myself or does it need different code? Thanks

On 4/28/2022 at 10:20 PM, sean.atkins said:

Thank you that's almost perfect, the last two clients on the page seam to be full width though still. Can I fix this myself or does it need different code? Thanks

Use this new code

/* all-clients mobile */
@media screen and (max-width:767px) {
div#block-e469ca92430b25cddc8d+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
div#block-e469ca92430b25cddc8d+.row .span-6 * {
    font-size: 14px;
}
div#block-e469ca92430b25cddc8d+.row+.row .span-6 {
    width: 50% !important;
    float: left !important;
}}

I am having a similar issue with my page when displayed on mobile. 

Site: https://www.elancloephotography.com/

My packages display in order from left to right in rows:

But on mobile its stacked by columns from left to right, causing the packages to be all over the place.

Could you provide code for me to correct this as well please?  @tuanphan

@ECI

The issue is your layout. When the screen gets narrow SS slides the columns under each other from left to right (responsive).

Using my Row Column Finder bookmarklet we can see that you have three long columns in a row.

On mobile column 2 slides under column 1 and column 3 slides under 2.

You need to create a layout that has several rows with 3 columns each.

Then when on mobile the order will be maintained.

When restructuring the content. Use the line block trick to maintain separate rows.

Then when you are sure it's all good. Delete the line blocks or hide then with CSS.

Note : If you have two text blocks on top of each other and you edit one, SS may try to combine them and ruin your layout. Something to watch out for. Again use line blocks to help out if that happens.

Let us know how it goes.

2 hours ago, creedon said:

@creedon

Let us know how it goes.

Perfect! Thank so much for your help with this! That fixed the problem! 🥳

I have the wrong stacking order issue as well on mobile with my page.

What am I doing wrong?

Https://securechek.ai/solutions

3 hours ago, cecifp said:

I have the wrong stacking order issue as well on mobile with my page.

Your section is Fluid Engine and the suggestions prior to your post are solutions for the Classic Editor.

I think your issue is related to how FE doesn't work the way one would expect. I know of no solutions but perhaps others will.

7 hours ago, creedon said:

Your section is Fluid Engine and the suggestions prior to your post are solutions for the Classic Editor.

I think your issue is related to how FE doesn't work the way one would expect. I know of no solutions but perhaps others will.

Thank you @creedon. I'll have to figure out where to go for help with that then, the Fluid Engine if no one else knows here...

This implies we don't have Fluid Engine if it's asking me to upgrade, no?