Jump to content

Changing the order of blocks in mobile view

Recommended Posts

Hey @Begona maybe try to use next layout col-6 not 2-2-4-2-2.  col-6 > col-2(spacer) + col-2(image) + col-2(spacer) and make second column with the same layout.

Edited by SquareRefresh

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
58 minutes ago, Begona said:

Site URL: http://cadimat.wine/enoturismo

Hi! Hope someone can help me.

 

I used spacer blocks to achieve a 2 column layout with:

 

1. Icon

2. Text

3. Aligned button

 

I’d like to have the same order for mobile:

Column 1

1. icon

2. Text

3. Aligned button

 

Column 2

1. icon

2. Text

3. Aligned button

 

I appreciate any help!

 

Beside @SquareRefresh's solution, i suggest using the following code in Home > Design > Custom Css

@media only screen and (max-width: 767px) {
	#block-yui_3_17_2_1_1637576991249_12342 + .row  > .col {
		width: 50% !important;
		float: left !important;
	}

	#block-yui_3_17_2_1_1637576991249_12342 + .row + .row > .span-5 {
		width: 50% !important;
		float: left !important;
	}

	#block-yui_3_17_2_1_1637576991249_12342 + .row + .row > .span-4 {
		width: 50% !important;
		float: left !important;
	}

	#block-yui_3_17_2_1_1637672302500_12480 + .row > .span-6 {
		width: 50% !important;
		float: left !important;
	}
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

image.png.895161eed023d6d7c3a9b6aa0ab9ff3f.png

image.png.b931fb1ad07e820583d96f4c9a9e05ff.png

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 minutes ago, Begona said:

Thanks @bangank36 and @SquareRefresh

I was trying to have only one column on mobile as opposed to 2.

This is what I want on mobile:

icon.png.b9ed93ccaf8104f58e13548da02d1cd7.png

 

However, because my text is not even, the buttons are not aligned on desktop when doing styling it like that. :

 

Opp! Have you changed your page layout? the above Css codes i sugesst is for your current layout 😞

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/23/2021 at 11:46 PM, Begona said:

Yes, the breakpoint is fine, but I wanted 1 column on mobile, not 2.

Maybe I didn't explain correctly.

Do you still need help?

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.