Alternating Featured Rows Display on Mobile

Store Design
1

Hi all.

On our store: https://www.gnawchocolate.co.uk/

I have multiple images with text on the homepage and these alternate left and right as below…

Image Text

Text Image

Image Text

However, on mobile it’s shown as…

Text

Image

Image

Text

Ideally, I’m looking for this image to always be displayed before the text on mobile for the image with text featured row elements. Does anyone have any ideas on how to achieve this?

Many thanks,

Ben

2

Hi @BenRourke ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/style.scss->paste below code at the bottom of the file:
@media (min-width: 479px) {
    .homepage-featured-content .feature-row {
        display: flex !important;
        flex-wrap: wrap;
    }
    .homepage-featured-content .feature-row .feature-row__item:not(.feature-row__text) {
        order: 2;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.