Jump to content

Changing the order of blocks in mobile view

Recommended Posts

Site URL: https://www.fevronia.net/collections

Hi,

This seems to be a fairly common problem but requires site specific code and various threads suggested starting fresh posts... so here goes.

Site 'https://www.fevronia.net/collections'

Pass 'Fevroniapass'

I'd like to change the way my clients 'collections' page displays on mobile view.

On desktop it flows:

1 text / 2 image

3 image / 4 text

5 text / 6 image etc

And on mobile it flows:

1 text

2 image

3 image

4 text

5 text

6 image etc

Instead I'd like it to alternate between text and images, so:

1 text

2 image

4 text

3 image

5 text

6 image etc

Many thanks for any help in advance : )

 

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

4 hours ago, TomMesquitta said:

Site URL: https://www.fevronia.net/collections

Hi,

This seems to be a fairly common problem but requires site specific code and various threads suggested starting fresh posts... so here goes.

Site 'https://www.fevronia.net/collections'

Pass 'Fevroniapass'

I'd like to change the way my clients 'collections' page displays on mobile view.

On desktop it flows:

1 text / 2 image

3 image / 4 text

5 text / 6 image etc

And on mobile it flows:

1 text

2 image

3 image

4 text

5 text

6 image etc

Instead I'd like it to alternate between text and images, so:

1 text

2 image

4 text

3 image

5 text

6 image etc

Many thanks for any help in advance : )

 

I can not access your site at the moment. Can you check it again?

image.thumb.png.e57ce6aed38fd17aadc639393aaaae3b.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 11/19/2021 at 5:14 PM, TomMesquitta said:

Site URL: https://www.fevronia.net/collections

Hi,

This seems to be a fairly common problem but requires site specific code and various threads suggested starting fresh posts... so here goes.

Site 'https://www.fevronia.net/collections'

Pass 'Fevroniapass'

I'd like to change the way my clients 'collections' page displays on mobile view.

On desktop it flows:

1 text / 2 image

3 image / 4 text

5 text / 6 image etc

And on mobile it flows:

1 text

2 image

3 image

4 text

5 text

6 image etc

Instead I'd like it to alternate between text and images, so:

1 text

2 image

4 text

3 image

5 text

6 image etc

Many thanks for any help in advance : )

 

Add to Design > Custom CSS

/* mobile collections order */
@media screen and (max-width:767px) {
div#page-section-618e3f56c9ff232648226b07>.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-618e40cbc756e974036263a5>.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-618e400cde3df46a31d707ac>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.