Jump to content

Custom CSS to change block order

Recommended Posts

Website: https://vibraphone-plantain-39ts.squarespace.com/media

On the Media page, the blocks are meant to be read left to right, however on mobile view this is changed from top to bottom of the first column, then top to bottom of the second column.

I am looking for the CSS to change the mobile view to:

Block 1
Text 1 (Garden House)
Block 2
Text 2 (Road House)
Block 3
Text 3 (Road House)
Block 4
Text 4 (Road House)
Block 5
Text 5 (Hideout House)

Any assistance here would be greatly appreciated! Thanks!

Link to comment
  • Replies 7
  • Created
  • Last Reply

You don't need CSS or code to correct this behaviour. Instead, you need to drag the blocks into the correct places. I know this may sound unlikely, but trust me. When you add blocks to the page you are adding them to a grid. In this case, you've created two columns, and placed blocks in them. This is why they compress in the way that they do.

Instead you need to drag them so that you create rows, not columns. It's easier to do by adding some line blocks to the page and then placing the blocks between them. Then remove the lines when finished. If you need help with this, let me know.

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

@Paul2009 Thanks for your response! Will this change the look of the desktop view? The way it's currently laid out on the desktop is the way I'd like it to remain. If you could explain what you mean a bit more I'd appreciate it. When I try dragging the top two videos around, for instance, I don't see any other way than to make those two columns. Thank you!

Link to comment

@Paul2009 Thanks for your response! Will this change the look of the desktop view? The way it's currently laid out on the desktop is the way I'd like it to remain. If you could explain what you mean a bit more I'd appreciate it. When I try dragging the top two videos around, for instance, I don't see any other way than to make those two columns. Thank you!

Link to comment

No, it doesn't affect your layout, just the flow. For example, here's a quickly assembled video showing four blocks. To start with they are in columns like yours and they show up in the 'wrong' order on mobile. Rearrange them into rows and they appear correctly.

alt text

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

No, it doesn't affect your layout, just the flow. For example, here's a quickly assembled video showing four blocks. To start with they are in columns like yours and they show up in the 'wrong' order on mobile. Rearrange them into rows and they appear correctly.

alt text

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • 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.