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

Switching the order of blocks for mobile


AThompson_social

Question

  • Answers 20
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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-

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

Add to Settings > Advanced > Code Injection > Footer > Then save, reload & check your site on mobile. If the code doesn't work properly, access Design > Site Styles > Disabl

Posted Images

20 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;
}
}

 

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!

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?

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

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;
}
}

 

Link to post
  • 0

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
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;
}
}

 

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. 
Link to post
  • 0
On 2/23/2021 at 7:47 PM, ilonapoutanen said:

I would also like to switch one image above a link in mobile (see the screenshot). Any help with this?

link: https://silver-caribou-ejyk.squarespace.com/
password: kotoisa

Screenshot.jpg

Add to Design > Custom CSS

/* image text mobile */
@media screen and (max-width:767px) {
div#page-section-5fdb200c537b3a6ff2311f9c>.row:nth-child(2) .span-5:nth-child(3) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

 

Link to post
  • 0

Hi @tuanphan, I've got a similar problem. 

downtoearthadventures.com

pw: downtoshirts

 

Right now on mobile the blocks are ordered:

text (hiking)

image (image of rocks)

image (image of women)

text (swimming)

 

But I'd like it to be:

text (hiking)

image (image of rocks)

text (swimming)

image (image of women)

 

Link to post
  • 0
On 4/27/2021 at 1:47 AM, zala said:

Hi @tuanphan, I've got a similar problem. 

downtoearthadventures.com

pw: downtoshirts

 

Right now on mobile the blocks are ordered:

text (hiking)

image (image of rocks)

image (image of women)

text (swimming)

 

But I'd like it to be:

text (hiking)

image (image of rocks)

text (swimming)

image (image of women)

 

Hi. I think this require JavaScript code. CSS can't solve this. Do you use Personal or Business or Commerce Plan?

Link to post
  • 0
On 4/28/2021 at 4:26 PM, zala said:

Hi @tuanphan, Thanks for looking into it. I'm on the Business plan. 

Add to Settings > Advanced > Code Injection > Footer > Then save, reload & check your site on mobile.

If the code doesn't work properly, access Design > Site Styles > Disable Ajax Loading.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 640) {
$('section#swimming-text-flex-split').insertBefore('section#swimming-banner-flex-split');
}
});
</script>

 

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