Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom CSS to change block order


chrissygray
Go to solution Solved by paul2009,

Question

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!

Edited by chrissyg
Initial Revision
Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 0

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include™, including a range of Squarespace extensions.
I value honesty, integrity, transparency and respect.
Links in my posts may refer to SF Digital products or may be affiliate links.

Link to post
  • 0

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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include™, including a range of Squarespace extensions.
I value honesty, integrity, transparency and respect.
Links in my posts may refer to SF Digital products or may be affiliate links.

Link to post
  • 0

@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 post
  • 0

@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 post
  • 0

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

Edited by Paul2009
Initial Revision

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include™, including a range of Squarespace extensions.
I value honesty, integrity, transparency and respect.
Links in my posts may refer to SF Digital products or may be affiliate links.

Link to post
  • 0

Got it! Thank you so much! I was having a little bit of trouble with the text that was supposed to be below each image block but I changed those to captions instead of text blocks and it did the trick. Much appreciated!!

Link to post
  • 0

Got it! Thank you so much! I was having a little bit of trouble with the text that was supposed to be below each image block but I changed those to captions instead of text blocks and it did the trick. Much appreciated!!

Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...