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

Switching the order of blocks for mobile

Question

12 answers to this question

Recommended Posts

  • 0

Which sections?

add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1573840832712_204829+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

Thanks Tuanphan, that bit of code did wonders for me!

Unfortunately, I had previously solved the problem using your code above but now the 'block-yui' code seems to have disappeared from inspector, and I've lost the column reverse.

Any help with this would be hugely appreciated! Below is the current code I'm running with.

@media screen and (max-width:640px) {
div#yui_3_17_2_1_1589993939235_232+.row.sqs-row {
    display: flex;
    flex-direction: column-reverse;
  } 
div#yui_3_17_2_1_1589993939235_306+.row {
    display: flex;
    flex-direction: column-reverse;
} 
  }


https://orange-olive-hs54.squarespace.com/
PWD: Abacaxi!

Share this post


Link to post
  • 0
15 hours ago, Ana_Neves said:

Thanks Tuanphan, that bit of code did wonders for me!

Unfortunately, I had previously solved the problem using your code above but now the 'block-yui' code seems to have disappeared from inspector, and I've lost the column reverse.

Any help with this would be hugely appreciated! Below is the current code I'm running with.


@media screen and (max-width:640px) {
div#yui_3_17_2_1_1589993939235_232+.row.sqs-row {
    display: flex;
    flex-direction: column-reverse;
  } 
div#yui_3_17_2_1_1589993939235_306+.row {
    display: flex;
    flex-direction: column-reverse;
} 
  }


https://orange-olive-hs54.squarespace.com/
PWD: Abacaxi!

#yui is dynamic, It will change

#block-yui is fixed, it won't change

Which sections on your site? Which order you want?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

Specifically, these two sections in the hop-scotch area towards the bottom of the homepage. ( see attached) where the column needs reversing for mobile.

I used to have a block-yui code for these, but I can't see them in inspector 😒

 

Screenshot 2020-05-21 at 09.51.24.png

Screenshot 2020-05-21 at 09.51.30.png

Share this post


Link to post
  • 0
3 hours ago, Ana_Neves said:

Specifically, these two sections in the hop-scotch area towards the bottom of the homepage. ( see attached) where the column needs reversing for mobile.

I used to have a block-yui code for these, but I can't see them in inspector 😒

 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-7854afc870c74dcb77e3+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)

Tried approaches above and elsewhere on the forum, but have yet to find the right formula. Wishing to reverse column order of two blocks on mobile of the top visible section on this this page.  ( section[data-section-id="5ef177e3cc65d8443616c06a"] ) ( #block-5ef177e4d15ac858b69f565a ) &  ( #block-yui_3_17_2_1_1592882387887_7816 ) On mobile would like the image block on the right to display first--above the text block. 

Edited by thaitandem

Share this post


Link to post
  • 0
6 hours ago, thaitandem said:

Tried approaches above and elsewhere on the forum, but have yet to find the right formula. Wishing to reverse column order of two blocks on mobile of the top visible section on this this page.  ( section[data-section-id="5ef177e3cc65d8443616c06a"] ) ( #block-5ef177e4d15ac858b69f565a ) &  ( #block-yui_3_17_2_1_1592882387887_7816 ) On mobile would like the image block on the right to display first--above the text block. 

Add to Home > Design > Custom CSS

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

Thanks so much tuanphan. Would you be so kind again, and share with me how I could vertically center-align the text block? I've been struggling with that as well.

 

Screen Shot 2020-06-23 at 8.58.19 PM.png

Share this post


Link to post
  • 0

Thanks tuanphan for getting back. Yes, I have changed what looks like a Text Block to an Image Block. I gave up trying to figure out how to use CSS to vertically align the text content block adjacent to the image in this section--way over my head I guess.  I came up with, and applied the solution described below. But if you or someone can offer some CSS for vertically center text content in one block (column) adjacent to an image block (column), that would be far simpler than what follows.  

I changed the Text Block containing the title and subtitle to a Poster Image Block. This allowed me to place my title and subtitle text into the fields provided for this purpose by Poster Images--then let the Squarespace Layout Engine do as it pleased and provide the vertical centering of my title and subtitle. But first I had to create a single-color image file matching my desired background color for the text, and size this image to match the length and width as my actual image the text refers to. Used this as the Poster Image behind the title and subtile. I also had to eliminate the default opacity Squarespace applied to this single-color Poster Image per the following: 

 
div.image-overlay {background: transparent !important;}
 
The reason for all these hoops is that I wanted my image and text blocks to each occupy 50% of the page width and be full-bleed within their respective halves of the section. The Image Card option only allows about 40-45% width for the image (55-60% for the text) and is not full-bleed. Other default layouts that offered vertical title/subtitle centering all broke when I adjusted the section padding to achieve full-bleed for the adjacent image block. 

Share this post


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...