Rearrange Sections On Mobile 7.1

Site URL: http://dreamincolor.ink/

Hi everyone, like the title says, I need help rearranging the sections on mobile. This way, the sections alternate between image and text sections. Any help would be greatly appreciated. Thanks!

Hey!

I found an article from Rebecca Grace detailing how to fix your exact problem! I'll link it below.

Website With Video & Custom CSS

Squarespace Collection/Block Identifier

Hope this helps!

Thanks @shiDMV! I've tried a few of her solutions, but unfortunately, they didn't work in this site for some reason. Thanks for the suggestion though!

14 hours ago, tres-bien said:

Site URL: http://dreamincolor.ink/

Hi everyone, like the title says, I need help rearranging the sections on mobile. This way, the sections alternate between image and text sections. Any help would be greatly appreciated. Thanks!

 

You want image text image text on mobile?

19 hours ago, tuanphan said:

You want image text image text on mobile?

@tuanphan exactly!

On 5/2/2022 at 11:39 AM, tres-bien said:

@tuanphan exactly!

It looks like you used these CSS to solve problem?

@media screen and (max-width: 640px) {
    #collection-6201d8e57cd53b2ab7155236 #page .sections {
        display:flex;
        flex-direction: column
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(1) {
        order: 1
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(2) {
        order: 2
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(3) {
        order: 4
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(4) {
        order: 3
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(5) {
        order: 5
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(6) {
        order: 6
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(7) {
        order: 8
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(8) {
        order: 7
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(9) {
        order: 9
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(10) {
        order: 10
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(11) {
        order: 11
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(12) {
        order: 12
    }
}

@tuanphan I did, but this did not work. The sections remain in the same order. Any help would be greatly appreciated.

On 5/5/2022 at 4:46 AM, tuanphan said:

It looks like you used these CSS to solve problem?

@media screen and (max-width: 640px) {
    #collection-6201d8e57cd53b2ab7155236 #page .sections {
        display:flex;
        flex-direction: column
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(1) {
        order: 1
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(2) {
        order: 2
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(3) {
        order: 4
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(4) {
        order: 3
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(5) {
        order: 5
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(6) {
        order: 6
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(7) {
        order: 8
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(8) {
        order: 7
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(9) {
        order: 9
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(10) {
        order: 10
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(11) {
        order: 11
    }

    #collection-6201d8e57cd53b2ab7155236 #page .sections .page-section:nth-of-type(12) {
        order: 12
    }
}

 

Hi @tuanphan, just following up on this. Thanks!