Jump to content

Swap Image and Text Block Positions in Mobile

Recommended Posts

Hi,

Page is: https://www.jeffgalferphotography.com/bio

I'm trying to figure out how to write the code so that the text block appears above the masked boy photo when in mobile only.  Once it hits mobile, the order of the blocks is:

Boy in Red Sweatshirt Photo

Masked Boy Photo

Text

However, I'd like it to be in mobile:

Boy in Red Sweatshirt Photo

Text

Masked Boy Photo

I have corrected this previously by not having the text wrap around the masked boy photo on desktop. However, I like the wrapping and I'd prefer to keep it. It unfortunately just also changes the positioning of the masked boy photo when in mobile, though, to on top of the text.  

Any ideas on this?

Thanks!

Jeff

 

Edited by jg66ue
adding website
Link to comment
  • Replies 6
  • Views 353
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Can you share your website URL and page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

This guide should be helpful:

https://www.primitusconsultancy.co.uk/blog/how-to-reorder-blocks-for-mobile-squarespace-71#:~:text=From your Squarespace account%2C go,the Custom CSS editor box.&text=This will reverse the order of the block.&text=If you have 3 columns,to 3%2C2%2C1.

You code should look something like this:

@media screen and (max-width: 640px) {
 #collection-63c7a94b3a450023e95087aa {
  .sqs-row {
    display: flex;
    flex-direction: column;
  }
  .col :nth-child(3) {order: -1;}
  }
}

Hope that helps!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Part of the issue here is that the masked boy photo is located within the text container. I did this so that the text wraps around the photo as the screen gets smaller.  However, when the screen hits mobile, the text is being forced below the photo instead of above it.  If I take the masked boy photo out of the text container, I lose the text wrapping, but the text stays above the photo in mobile.  

Edited by jg66ue
clarifying
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.