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

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

Share this post


Link to post

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.

Share this post


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

Share this post


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