(Pro) Custom class to reverse direction on mobile

Support
#1

For whatever reason I can’t seem to make a custom class that will reverse the direction of a two column row on smaller screens.

Any suggestions?

#2

Hello Tyler,

To resolve your issue, kindly checkout this thread.

Please let us know if this works out for you.

#3

Hi, @RueNel!

Thanks for the link, but that doesn’t seem to be working for me. While I doubt it makes a difference, that post looks like it’s from 2017. Just for reference, I’m on Pro 3.0.3

Currently, under the Row options I see a Layout field with “Reverse” as an option. When I select that, on large screens the it reverses, but it does not on mobile.

In regards to the thread you shared, to make sure I’m implementing it properly, this is my current layout on large screens:

Row 1. [ Image ] [ Text ]
Row 2. [ Text ] [ Image ]
Row 3. [ Image ] [ Text ]

On mobile I would like:
Row 1 > Column Left [ Image ]
Row 1 > Column Right [ Text ]
Row 2 > Column Right [ Image ]
Row 2 > Column Left [ Text ]
Row 3 > Column Left [ Image ]
Row 3 > Column 3 Right [ Text ]

According to that thread, I simply add the class "right’ to the left or the first column in Row 2 and it should scaffold correctly, however it doesn’t appear to be doing that.

And ideas? Thanks!

#4

Hey Tyler,

The solution in the thread Ruenel provided might work for the Classic Row but it is not applicable to the new Row Layout system which you are using. I could tell that because the Reverse option is only available for the new Row. The Classic Row is also not recommended for this setup.

To achieve what you’d like on mobile, the setup should be this:

Desktop:
Row 1: [Image][Text]
Row 2: Duplicate Row 1 and enable Reverse so setup becomes [Text][Image]
Row 3: Duplicate Row 1

Mobile:
Row 1 > Column Left [Image]
Row 1 > Column Right [Text]
Row 2 > Column Left [Image]
Row 2 > Column Left [Text]
Row 1 > Column Left [Image]
Row 1 > Column Right [Text]

Below is a video walkthrough showing a similar setup. You’ll see that if you duplicate

#5

@christian_y, thanks for the link. It was kind of hard to follow that video without any narration.

The “Reverse” option works when I have the row set to display as two adjacent columns, however when the columns are set to stack (for mobile purposes) the “Reverse” option does not seem to work.

Any ideas?

#6

Hello Tyler,

Thanks for writing in!

You will need 3 row element. All 3 rows will have two columns. Insert an image element and a text element to each of the column. All of the image elements will be inserted in the left column of each row. All the text element will need to be inserted in the left side column of each row. Lastly, in the 2nd row, apply the Reverse Layout Option. This should display like this:

Row 1. [ Image ] [ Text ]
Row 2. [ Text ] [ Image ]
Row 3. [ Image ] [ Text ]

Once the columns collapse in smaller screens into just one column, it will be like this:

Row 1. 
  [ Image ]
  [ Text ]
Row 2. 
  [ Image ]
  [ Text ]
Row 3. 
  [ Image ]
  [ Text ]

Hope this makes sense.

1 Like
#7

@RueNel, thanks very much!

That explanation was perfect and it appears to be working now.

Take care!

#8

You are most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.