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

Change block sequence for mobile view


Recommended Posts

Lots of folks have asked a similar question in different ways and there don't seem to be answers posted, so I figured I'd try again. This community is such an amazing resource!

I am wondering if there is a way to use CSS to swap the order of blocks in mobile view so that you can specify some blocks to stack right to left rather than the standard left to right. So something like:

@media only screen and (max-width: 640px) {        //identify blocks you want to swap and change their order      }

My site is informd.co.in or informd.squarespace.com . Here's what I want to do specifically (on the team page):

I really like my desktop arrangement, which is:

<1 picture> <2 text>     <3 text> <4 picture>

Ideally I would like my mobile view to be arranged:

<1 picture>     <2 text>     <4 picture>     <3 text>

But squarespace goes left to right so it ends up as:

<1 picture>     <2 text>     <3 text>     <4 picture>

Is there css to swap blocks 3 and 4 in the mobile view?

Thank you in advance!

Edited by yashlunagaria
Link to comment

@tuanphan I switched the desktop format to have all images on the left side so that the stacking wouldn't affect the mobile site.

The first image is how I want my desktop site to look. However, that makes the mobile block order go ----> image, text, text, image, image, text, text, image, image, text. Can you please help me with the CSS code that would correct this in the mobile view?

screen-shot-2019-07-29-at-20557-pm.png.ec8eac6114bc3eb16d8da85a37c2cbbf.png

Link to comment
  • 10 months later...

Hi Tuanphan,

I have an issue with text blocks/images swapping position on mobiles, exactly like the above problem. Is there any chance you can help me out too? My site is here and the issue is occurring on the 'About' and 'How I Work' pages (I'm sure you'll see where as soon as you look at the pages).

Many thanks,

Mark

Link to comment
On 6/12/2020 at 6:06 AM, markjjeffries said:

Hi Tuanphan,

I have an issue with text blocks/images swapping position on mobiles, exactly like the above problem. Is there any chance you can help me out too? My site is here and the issue is occurring on the 'About' and 'How I Work' pages (I'm sure you'll see where as soon as you look at the pages).

Many thanks,

Mark

Can you share access password?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

With about page add to Home >D esign > custom CSS

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

}

Where is how i work page?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi Tuanphan,

Thank you for the quick reply and code but I need the images above the text. Apologies, I should've been more clear.

Also, the 'How I Work' page is nested under 'Work With Me'. I need the photo at the top above the accompanying copy ("Have you been everywhere...") as well as the three photos at the bottom to sit above their respective text (leaves photo above "Knowing the root cause", smoothie photo above "Cleanse to heal" and salad photo above "Autoimmune confusion").

Thank you again.

Link to comment
48 minutes ago, markjjeffries said:

Hi Tuanphan,

Thank you for the quick reply and code but I need the images above the text. Apologies, I should've been more clear.

Also, the 'How I Work' page is nested under 'Work With Me'. I need the photo at the top above the accompanying copy ("Have you been everywhere...") as well as the three photos at the bottom to sit above their respective text (leaves photo above "Knowing the root cause", smoothie photo above "Cleanse to heal" and salad photo above "Autoimmune confusion").

Thank you again.

What is access password?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 6/16/2020 at 9:06 PM, markjjeffries said:

RORpassword123!

Hi. Sorry for the late reply.

Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5ecd9b853bbee218ed13153f>.row {
    display: flex;
    flex-direction: column-reverse;
}
/* how i work */
div#page-section-5ec5b0227245c9582361bb23>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

With 3 images, code can't solve this, you need to adjust layout a bit.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thank you Tuanphan. That's the 'How I Work' page sorted.

Is it possible for you to provide code for a further two changes?

1. On the 'Home' page, I'd like the circle image of the lady placed above the text ('Welcome! I'm Rebecca...").

2. On the 'About' page, I'd like the 4 circular images above their accompanying text, so:

Road image
"The Journey..."
Tree image
"The Why..."
Flower image
"From Sickness..."
Lady at desk image
"Professional..."
Button

Many thanks!

Link to comment
14 hours ago, markjjeffries said:

Thank you Tuanphan. That's the 'How I Work' page sorted.

Is it possible for you to provide code for a further two changes?

1. On the 'Home' page, I'd like the circle image of the lady placed above the text ('Welcome! I'm Rebecca...").

2. On the 'About' page, I'd like the 4 circular images above their accompanying text, so:

Road image
"The Journey..."
Tree image
"The Why..."
Flower image
"From Sickness..."
Lady at desk image
"Professional..."
Button

Many thanks!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* home */
div#page-section-5ecd9b853bbee218ed13153f>.row {
    display: flex;
    flex-direction: column-reverse;
}
/* About - Road */
div#page-section-5ed561f6bd9be315e06be350>.row>.span-12>.row {
    display: flex;
    flex-direction: column-reverse;
}
/* about - the why */
div#page-section-5ed56085606c68215b5a9d32 .span-12>.row {
    display: flex;
    flex-direction: column;
}
/* about - from sickness */
div#page-section-5ed55eb4d34ef03cd3be5ae6 .span-12>.row {
    display: flex;
    flex-direction: column-reverse;
}
/* about - book a consulation */
div#page-section-5ed55b94a22a3463f7510577>.row {
    display: flex;
    flex-direction: column;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...
13 hours ago, pgcreativedesigns said:

@tuanphan I'm also having a similar issue on two pages. I'm wanting to swap blocks on mobile for patrickgarr.com/coaching and patrickgarr.com/masterclasses under the tabs so that the image stacks on top of the text for each on mobile. Is there a way to do this? Thank you for all of your help! 

Add to Design > Custom CSS

/* Coaching order mobile */
@media screen and (max-width:767px) {
div#sqpl-tab-group-0 .sqpl-tab-content .row {
    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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/17/2021 at 4:46 AM, tuanphan said:

Add to Design > Custom CSS


/* Coaching order mobile */
@media screen and (max-width:767px) {
div#sqpl-tab-group-0 .sqpl-tab-content .row {
    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;
}
}

 

@tuanphan This worked PERFECTLY! Thank you tremendously for your help!

Link to comment
  • 3 weeks later...
On 4/17/2021 at 4:46 AM, tuanphan said:

Add to Design > Custom CSS


/* Coaching order mobile */
@media screen and (max-width:767px) {
div#sqpl-tab-group-0 .sqpl-tab-content .row {
    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;
}
}

 

Hi @tuanphan! Is there any easy way to also do this on this page (https://www.patrickgarr.com/coach under offerings) to keep the desktop order of icons on mobile? And also here (https://www.patrickgarr.com/masterclasses under bootcamp) to keep the numbering in order for mobile? 

I also had this issue with image icons under a member area (trying to keep them in correct sequence of weeks on mobile). Is there any easy way to adjust this code for different sections?

Thank you TREMENDOUSLY for any and all advice! 

PG

Link to comment
On 5/9/2021 at 12:20 PM, pgcreativedesigns said:

Hi @tuanphan! Is there any easy way to also do this on this page (https://www.patrickgarr.com/coach under offerings) to keep the desktop order of icons on mobile? And also here (https://www.patrickgarr.com/masterclasses under bootcamp) to keep the numbering in order for mobile? 

I also had this issue with image icons under a member area (trying to keep them in correct sequence of weeks on mobile). Is there any easy way to adjust this code for different sections?

Thank you TREMENDOUSLY for any and all advice! 

PG

If anyone has insight on this, I'd love any tips! I still haven't found a solution just yet. Thanks for any and all advice!

Link to comment
On 5/9/2021 at 11:20 PM, pgcreativedesigns said:

Hi @tuanphan! Is there any easy way to also do this on this page (https://www.patrickgarr.com/coach under offerings) to keep the desktop order of icons on mobile? And also here (https://www.patrickgarr.com/masterclasses under bootcamp) to keep the numbering in order for mobile? 

I also had this issue with image icons under a member area (trying to keep them in correct sequence of weeks on mobile). Is there any easy way to adjust this code for different sections?

Thank you TREMENDOUSLY for any and all advice! 

PG

Add to Design > Custom CSS (for Coach)

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1620578529243_15151+.row {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
}
}

If it works, I will check another page

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
19 hours ago, tuanphan said:

Add to Design > Custom CSS (for Coach)


@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1620578529243_15151+.row {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
}
}

If it works, I will check another page

@tuanphan this worked PERFECTLY! Thank you. I would love to also fix it on the masterclass page. Let me know if there's a good way to do it there also. 

Link to comment

@tuanphan Hi I have a similar problem too for the mobile view. For my desktop view, I would like to have one image at left and one image at right. But when I switch to the mobile view, the order is wrong and I would like to have each  picture on top of their intro text. Could you help me fix the mobile view. Thank you! 

my site is shuqi-yang.squarespace.com

1907289067_2021-05-172_34_12.thumb.png.722e9c6fbeaca08f1f5df2da60582b33.png1373932979_2021-05-172_34_31.thumb.png.011dea971551773d70b23fff0e73e98d.png

Link to comment
On 5/18/2021 at 1:40 AM, 777777qi said:

@tuanphan Hi I have a similar problem too for the mobile view. For my desktop view, I would like to have one image at left and one image at right. But when I switch to the mobile view, the order is wrong and I would like to have each  picture on top of their intro text. Could you help me fix the mobile view. Thank you! 

my site is shuqi-yang.squarespace.com

 

Add to Design > Custom CSS

/* Mobile-Home-Text image order */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1621237888199_46996+.row, div#block-yui_3_17_2_1_1621241185564_32140+.row {
    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;
}

}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...

Hi @tuanphan

I'm a huge fan of yours! I find your comments reliable and helpful, especially for a beginner like me. I really need your help.

 

I have a similar issue from my website as well.

Website URL: https://www.coachcourtney.net/

From the Footer, the social media icons are arranged this way:

image.thumb.png.a2b804862ff7038f87e092459cf7cd3d.png

But on the mobile version, the icons looked like this:

image.png.56ceac03af193251efdbea59c4b53512.png

Is there any way for the social media icons from the mobile version arranged just like from the dekstop version? Like this way, I think?

image.png.79567eadeb576a99c8c845a896eb36f7.png

Also, it is possible to align the icons from the desktop version in the text below? And align the right section as well?

image.thumb.png.a3f06b29835ba40709f2119b0d306e9a.png

For the mobile version, is it possible to move the texts to the center? image.png.06d021f7cea1a093b1f322615d22f26d.png

 

Thank you. I hope you'll be able to read my comment though.

image.png

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