Alternating Columns

Support
#1

hi

I have a section on our site which uses columns to separate text and images. The layout is as follows:

Screen Shot 2563-07-05 at 13.55.53
Screen Shot 2563-07-05 at 13.55.53755×927 357 KB

Row 1
Text - Image
Row 2
Image - Text
Row 3
Text - Image

And so on. The images haven’t yet been made to fit the space; this is just a demo on the staging server.

I have it set to hit single columns when it reaches SM, 767px and below. The only issue is the order in which things appear. I’d ideally like to have them all look the same, but at the moment, when they go to single column, the ones which were Image - Text have the image first and then the text and the opposite for the other ones.

Other than creating an entirely new single column section and having it only show from 767px and below and hiding the regular one from 767px, it there another way?

In fact, I guess whilst we are on the subject, is it actually advisable to simply create an AMP version of the site which then shows on mobile devices, rather than bothering with the above issue at all? I have been against doing that since the mobile site is cached by Google, rather than my CDN provider. There do seem a lot of cons moving over to AMP.

What’s the view from your end?

cheers

#2

Hey @guybower1,

I’m sorry I can’t comment about AMP and it would require a 3rd party plugin to display an AMP version on mobile. You need to consult with a 3rd party developer for this.

Regarding the alternating column setup, you need to use the New Row element if you aren’t using it already. The video below will show you an alternating column setup using the new Row element. Pump up the volume if the narration isn’t audible.

Hope that helps.

#3

cheers Christian. Thanks so much for your reply

I had no idea about the reverse function. That changes a lot. Get one row working perfectly then duplicate and reverse and so on.

One quick question. If each text opposing section had a text heading and you wanted the heading at the top of each when the drop to single column, how would that be achieved? I can see how to do image and text, but the headline will live in the same column as the body text. Just curious how you would have the layout like this when it goes to single column on mobile device

Headline
Image
Body Tex
Headline
Image
Body Text

etc

Thanks so much for your help

#4

Hello @guybower1,

We highly recommend that you structure your section like this:

  • Section
    • Row
      • Column
        • Headline
    • Row
      • Column
        • Image
      • Column
        • Text
    • Row
      • Column
        • Headline
    • Row
      • Column
        • Image
      • Column
        • Text

So that when the screen gets smaller, the headline will always be above the image and the text.

Hope this makes sense.

#5

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