Switching the order of blocks for mobile

I have these "hop scotch" sections in my site. On mobile this section looks like garbage because it goes content, image, image, content. Is there anything I can do to make it go image content image content?

@lu.diehl

@tuanphan

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

PSWD socialive

Need site urllllllllllllllllll

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

socialive

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

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!

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?

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 😒

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

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. 

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

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.

Did you remove text box? I don't see...

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: 

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

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

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

Thank you so much, it works!

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)

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?

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

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>

Worked perfectly, thank you!

@tuanphan Hi there!  

Referencing the website below...would I need to add code for each separate block? Or is there a way to target everything all at once? If you notice on web or tablet view, each photo should have text below it.  On mobile, it stacks the photos on top of each other and then the text is below all of the photos. 

Thank you!

https://zaleski-yoga-therapy-trial.squarespace.com/

pass: essential

On 7/27/2021 at 10:03 PM, oldegray said:

@tuanphan Hi there!  

Referencing the website below...would I need to add code for each separate block? Or is there a way to target everything all at once? If you notice on web or tablet view, each photo should have text below it.  On mobile, it stacks the photos on top of each other and then the text is below all of the photos. 

Thank you!

https://zaleski-yoga-therapy-trial.squarespace.com/

pass: essential

 

 

Hi. No need to use code. You will adjust layout a bit. Can you add me as a contributor? I can do & quick a video on how to.

Hi, I have a similar issue with re-ordering except I want to re-order whole section IDs within the site on mobile.

I've used flexbox to create sections that at 50% width, and I need them re-ordering on mobile.

It's the 'designed for relaxation' and 'bedrooms and bathrooms' text next to the images that needs to sit below the image on mobile.

https://backwaternorfolk.squarespace.com/overview password:backwater

Thanks

22 hours ago, rubyrosedesign said:

Hi, I have a similar issue with re-ordering except I want to re-order whole section IDs within the site on mobile.

I've used flexbox to create sections that at 50% width, and I need them re-ordering on mobile.

It's the 'designed for relaxation' and 'bedrooms and bathrooms' text next to the images that needs to sit below the image on mobile.

https://backwaternorfolk.squarespace.com/overview password:backwater

Thanks

You mean text under image or image under text?