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

Avenue: Change block order on mobile?


cakalak

Question

Hi!

I'm creating a page in the Avenue template. When viewed on a desktop there is an image on the left, and text to the right (see "M", attached).

When viewed on a mobile device, the image comes first, with the text below (see "D", attached).

I'd like to swap the positions of the 2 blocks on the mobile device. That is, I'd like the text first, followed by the image below.

How can I do this?

Thank you!

 

 

D.png

M.png

Edited by cakalak
Wrong images attached
Link to post
  • Answers 63
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#page-5dc48a5090367c2c43071590>.row.sqs-row { display: flex; flex-direction: column-reverse; } }  

collie-collie-pedb.squarespace.com pw: gkoustascare123 Add this to Home > Design > Custom CSS. I will work. div#block-9acacb79707f826e4872, div#block-yui_3_17_2_1_1587576462470_170

Can you share link to your site& describe in detail? We can help easier.   Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1594

Posted Images

Recommended Posts

  • 0
16 minutes ago, cakalak said:

Hi tuanphan!

https://www.lawrence.kim/118-118-money-credit-card-design

I'd like to have the title and body text at the top of the page in mobile view, followed by the illustration of the card.

Thank you!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5dc48a5090367c2c43071590>.row.sqs-row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

Hi @tuanphan

I'm trying to figure out how I can amend the code to my site - https://www.jbs-roundbridge.co.uk/location

I'm trying to reorder the text "Swing into country living" to be before the golf images on mobile. Currently, on mobile the golf images are first. 

I've attached the browser layout which is fine, but the mobile layout needs reordering just for this bit of text and images. 

Please help.  

Unknown.png

Screen Shot 2019-11-25 at 12.54.53.png

Edited by Carrrrl
Link to post
  • 0
5 minutes ago, Carrrrl said:

Hi @tuanphan

I dont know the password as its a company site. 
It uses the Brine template - not sure if that helps. 

 

https://beaverhero.com/squarespace-how-to/#How_to_Setup_Password_Share_Site_URL

image.thumb.png.8b63e938e26962a3a8f96d55555f7d77.png

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
1 minute ago, Carrrrl said:

@tuanphan Oh sorry - its 123Fore!5 

Difficult!

try adding this code to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5dcd77fca638e247e615eda1>.row:last-child .col>.row:nth-child(2) {
    flex-direction: column-reverse;
    display: flex;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
2 hours ago, AThompson_social said:

@tuanphan -I have a question about how you target the row. So I have a hopscotch situation and am anticipating that I have to target each individual one. How do I find the ID that isn't YUI? or is there a way to flip the order of the text and image on only the odd rows?

the use cases section of the homepage 

https://lettuce-grapefruit-bdsr.squarespace.com/ 

pswd: socialive

https://beaverhero.com/squarespace-how-to/#How_to_find_Block_ID

Edited by tuanphan

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
4 hours ago, milkandhannah said:

Hey @tuanphan !

Any interest in helping me reorder the steps for mobile at https://milkandhannahphoto.com/new-page

I've been hunting for help and can't find anything except this thread.

 

Thank you so much!

page not found

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
On 1/18/2020 at 10:29 PM, milkandhannah said:

Sorry, I'll off forum in the next 2 weeks for LUnar New Year.

Will check later. Or you can also send to my email in signature. 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
On 11/25/2019 at 4:03 PM, tuanphan said:

Difficult!

try adding this code to Home > Design > Custom CSS


@media screen and (max-width:640px) {
div#page-5dcd77fca638e247e615eda1>.row:last-child .col>.row:nth-child(2) {
    flex-direction: column-reverse;
    display: flex;
}
}

 

Hey Tuanphan not sure if this thread is still active but you seem to be the man when it comes to re-ordering blocks on mobile!

I'm trying to change the order of how sub-headers and body copy appears on mobile on the 'website design package' page (ironically!). How do I switch the order to it appears in the right sequence? 

Screen Shot 2020-04-14 at 08.30.53.png

Screen Shot 2020-04-14 at 08.31.13.png

Link to post
  • 0
12 minutes ago, Mum-Folk said:

Hey Tuanphan not sure if this thread is still active but you seem to be the man when it comes to re-ordering blocks on mobile!

I'm trying to change the order of how sub-headers and body copy appears on mobile on the 'website design package' page (ironically!). How do I switch the order to it appears in the right sequence? 

 

 

This does not need custom code. Try below, if you do not understand what I say, I will find an article on the Squarespace Support page (otherwise I will make a short guide)

When you type the first 3 texts: The process, planning + design, delivrables.

Insert a Line Block under.

Then insert the next text, so that they are above the Line

--

Edited by tuanphan

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
11 minutes ago, tuanphan said:

This does not need custom code. Try below, if you do not understand what I say, I will find an article on the Squarespace Support page (otherwise I will make a short guide)

When you type the first 3 texts: The process, planning + design, delivrables.

Insert a Line Block under.

Then insert the next text, so that they are above the Line

--

thanks so much for the speedy reply tuanphan! I'm not sure I understand sorry - I would prefer not to have a line divider under the subheaders if possible? Do you have a link or any more info on how to do this? Thanks again, you've been such a massive help!

Link to post
  • 0
2 minutes ago, Mum-Folk said:

thanks so much for the speedy reply tuanphan! I'm not sure I understand sorry - I would prefer not to have a line divider under the subheaders if possible? Do you have a link or any more info on how to do this? Thanks again, you've been such a massive help!

You can add Line Block, then when you're done text, you can remove later.

Your text is in 2 different rows, so when you stack on mobile, you'll see the order is incorrect. Add a Line Block, just so you can put all the text in one row, you can delete it after you've finished the text

Edited by tuanphan

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
4 minutes ago, tuanphan said:

You can add Line Block, then when you're done text, you can remove later.

Your text is in 2 different rows, so when you stack on mobile, you'll see the order is incorrect. Add a Line Block, just so you can put all the text in one row, you can delete it after you've finished the text

But I want the information to stack in columns left to right - so subheader, text , button (left column), subheader, corresponding text ( middle column), subheader, corresponding text ( right column) - not sure how the above helps me do this?

Link to post
  • 0
3 minutes ago, Mum-Folk said:

But I want the information to stack in columns left to right - so subheader, text , button (left column), subheader, corresponding text ( middle column), subheader, corresponding text ( right column) - not sure how the above helps me do this?

use this https://support.squarespace.com/hc/en-us/articles/205815288-Page-and-block-layout-changes-on-mobile-devices#toc-multiple-even-columns-in-mobile-view

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

@tuanphan I love my design on desktop but when I resize to mobile, all of my items stack incorrectly. I tried to use the Squarespace support page and align them differently but I am still getting the same issue. It seems squarespace is stacking everything that appears on the left column first, then the right column whereas I would like the items that are horizontally aligned on desktop to stack below each other on mobile.

 

Is there any custom code to re-order the arrangement of these items? 

 

Site Link: https://www.potionsnmotions.com/products

Link to post
  • 0
On 4/17/2020 at 3:42 AM, brigidc.campbell said:

@tuanphan I love my design on desktop but when I resize to mobile, all of my items stack incorrectly. I tried to use the Squarespace support page and align them differently but I am still getting the same issue. It seems squarespace is stacking everything that appears on the left column first, then the right column whereas I would like the items that are horizontally aligned on desktop to stack below each other on mobile.

 

Is there any custom code to re-order the arrangement of these items? 

 

Site Link: https://www.potionsnmotions.com/products

What is correct order on mobile?

text - image - text - image

or image-  text - image - text

or?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...