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 post
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { /* home */ div#page-section-5ecd9b853bbee218ed13153f>.row { display: flex; flex-direction: column-reverse;

Posted Images

I have been searching for a solution to this for a long time, only you articulate the issue much nicer. I just posted a question about it.

Thank you! If I find an answer I will post for sure.

Link to post

@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 post
  • 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 post
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

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 post
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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