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

Avenue: Change block order on mobile?


cakalak

Question

Hi!

I'm creating a page in the Avenue template. When viewed on a desktop there is an image on the left, and text to the right (see "M", attached).

When viewed on a mobile device, the image comes first, with the text below (see "D", attached).

I'd like to swap the positions of the 2 blocks on the mobile device. That is, I'd like the text first, followed by the image below.

How can I do this?

Thank you!

 

 

D.png

M.png

Edited by cakalak
Wrong images attached
Link to comment

Recommended Posts

  • 0
4 minutes ago, merakiconceptstudio said:

Amazing! How can I get this to show before the images on mobile?

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1587744359724_8306 {
    position: static !important;
}
div#page-section-5ea30e882988be03b5735ec8 .span-12 .row {
    display: flex;
    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
  • 0
19 hours ago, tuanphan said:

Edit the code I sent, to this and add to Home > Settings > Advanced > Code Injection > Header


<style>
/* remove image blocks padding */
[data-section-id="5e73347bc0821f49f60360e0"] .image-block {
    padding: 0 !important;
}
</style>

If you want to donate, use this link

Hi, The mobile version is not working! the 0 padding top and bottom! on the sides its fine tho

1571515313_Screenshot2020-04-2809_24_29.thumb.png.db48d2cd172d3829ba9cd0aa4d4c856c.png

Link to comment
  • 0
44 minutes ago, theokoustas said:

Hi, The mobile version is not working! the 0 padding top and bottom! on the sides its fine tho

collie-collie-pedb.squarespace.com

pw: gkoustascare123

Add this to Home > Design > Custom CSS. I will work.

div#block-9acacb79707f826e4872, div#block-yui_3_17_2_1_1587576462470_17063, div#block-yui_3_17_2_1_1587576462470_28461, div#block-yui_3_17_2_1_1586863360945_37113 {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

image.thumb.png.f876e6326f01d51ada122a7b9f0b0945.png

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
  • 0

Hi @tuanphan!

You seem to be the expert at reordering blocks on mobile- I've been stuck on this issue and can't seem to find a resolution- would you be able to help? 

I love the mosaic gallery display on the front page of my website in desktop, but everything displays out of order on mobile. Is there a way to fix this? 

Thank you so much for your help!

site: https://www.oathanddream.com

Link to comment
  • 0
1 hour ago, JPrete said:

Hi @tuanphan!

You seem to be the expert at reordering blocks on mobile- I've been stuck on this issue and can't seem to find a resolution- would you be able to help? 

I love the mosaic gallery display on the front page of my website in desktop, but everything displays out of order on mobile. Is there a way to fix this? 

Thank you so much for your help!

site: https://www.oathanddream.com

Which gallery? Which order you want?

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
  • 0
On 5/2/2020 at 11:46 PM, tuanphan said:

Which gallery? Which order you want?

Hi tuanphan!

I'd love for this gallery to be numerically ordered (I don't really mind about the order of the photos), and right now, they are lining up as 1,3,2,4 on mobile. Is there a way to fix that?

Thank you so much!!

Screen Shot 2020-05-04 at 8.33.06 AM.png

Link to comment
  • 0
On 5/4/2020 at 10:35 PM, JPrete said:

Hi tuanphan!

I'd love for this gallery to be numerically ordered (I don't really mind about the order of the photos), and right now, they are lining up as 1,3,2,4 on mobile. Is there a way to fix that?

Thank you so much!!

Missing your comment. Have you solved yet?

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
  • 0

Hi @tuanphan! I would like to switch the ordering of the "Elevate Your Wellness" section of the homepage to where the photo shows before the illustration, header, and body text. I am attaching the mobile view screenshots of what it currently looks like. I would like it to be the same ordering as the sections above and below it, the "Elevate Your Business" and "Elevate Your Impact" sections. Also, could you also help with reducing the large amount of spacing between each of the elements? The website is www.flygeorge.com and password FlyGeorge20! Thanks so much!

IMG_2161.PNG

IMG_2162.PNG

Link to comment
  • 0
On 6/16/2020 at 8:23 AM, julia1 said:

Anyone got any guidance on how to do this in 7.1? 🙏

Can you share link to your site& describe in detail? We can help easier.

 

9 hours ago, laurasharp said:

Hi @tuanphan! I would like to switch the ordering of the "Elevate Your Wellness" section of the homepage to where the photo shows before the illustration, header, and body text. I am attaching the mobile view screenshots of what it currently looks like. I would like it to be the same ordering as the sections above and below it, the "Elevate Your Business" and "Elevate Your Impact" sections. Also, could you also help with reducing the large amount of spacing between each of the elements? The website is www.flygeorge.com and password FlyGeorge20! Thanks so much!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1594322502639_33219+.row {
    display: flex;
    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
  • 0

@tuanphan I have tried a couple of your solutions on my page but i'm doing something wrong. could you please help? I want the 3 images to show first and then the WHO WE ARE text section to show after, instead of the way it is now. the page is https://keyboard-swordfish-dk95.squarespace.com/ password: test.

 

 

Thank you

Link to comment
  • 0
3 hours ago, LaurenF said:

I want the 3 images to show first and then the WHO WE ARE text section to show after

It appears the arrangement is as you describe. Image first and text to the right (after).

When you say after do you mean below? If yes then you can edit the page and drag and drop the elements to rearrange them.

Screen Shot 2021-01-10 at 7.35.06 PM.png

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
On 1/11/2021 at 7:01 AM, LaurenF said:

@tuanphan I have tried a couple of your solutions on my page but i'm doing something wrong. could you please help? I want the 3 images to show first and then the WHO WE ARE text section to show after, instead of the way it is now. the page is https://keyboard-swordfish-dk95.squarespace.com/ password: test.

 

 

Thank you

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-5ffb61fc204f8126440bc2dd>.row {
    display: flex;
    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
  • 0

@SouthernSunEvents

No code needed to fix this. You just need to rearrange the images. Currently you have them set up as two columns side by side. So when the image are wrapped for mobile they are out of the desired order.

Edit the page and put two line blocks across the full with of the page.

1892857621_ScreenShot2021-03-14at1_44_02PM.thumb.png.47088f75a204f1350bff7b34e9a424a8.png

Then rebuild your layout using the lines to keep from accidentally creating unwanted columns.

Put two images above the first line block side by side.

162402947_ScreenShot2021-03-14at1_49_55PM.thumb.png.4e228a390a45873e919605f2b959d50c.png

Then put two images between the first and second line blocks side by side.

Save the page. Test that the order is right on mobile. If OK then go back in and remove the line blocks. Save.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
On 3/14/2021 at 4:59 PM, creedon said:

@SouthernSunEvents

No code needed to fix this. You just need to rearrange the images. Currently you have them set up as two columns side by side. So when the image are wrapped for mobile they are out of the desired order.

Edit the page and put two line blocks across the full with of the page.

1892857621_ScreenShot2021-03-14at1_44_02PM.thumb.png.47088f75a204f1350bff7b34e9a424a8.png

Then rebuild your layout using the lines to keep from accidentally creating unwanted columns.

Put two images above the first line block side by side.

162402947_ScreenShot2021-03-14at1_49_55PM.thumb.png.4e228a390a45873e919605f2b959d50c.png

Then put two images between the first and second line blocks side by side.

Save the page. Test that the order is right on mobile. If OK then go back in and remove the line blocks. Save.

Let us know how it goes.

Thanks for your response. Just did this and it seems to still be stacking the images by row

Left - Right

Left - Right

but in this instance I want it to stack

Left - Right

Right - Left

so that I have wedding - venue - wedding - venue. Not sure if this makes any sense typing it all out!

Screen Shot 2021-03-15 at 8.27.10 PM.png

Screen Shot 2021-03-15 at 8.27.28 PM.png

Link to comment
  • 0

@SouthernSunEvents

Now that the layout is fixed up we can use the following to accomplish what I think you want.

Add the following to Design > Custom CSS.

@media only screen and ( max-width : 640px ) {

  #page-5e1df5f56b4ecf142af1d0d5 > .sqs-row .sqs-row:nth-child( 4 ) {
  
    display : flex;
    flex-direction : column-reverse;
    
    }
  }

This is for v7.0 using the Brine template family.

If you remove the line blocks the number four (nth-child) will need to be adjusted. Probably two if you remove all the line blocks. Test that the order is right on mobile before doing so.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
On 3/15/2021 at 10:02 PM, creedon said:

@SouthernSunEvents

Now that the layout is fixed up we can use the following to accomplish what I think you want.

Add the following to Design > Custom CSS.


@media only screen and ( max-width : 640px ) {

  #page-5e1df5f56b4ecf142af1d0d5 > .sqs-row .sqs-row:nth-child( 4 ) {
  
    display : flex;
    flex-direction : column-reverse;
    
    }
  }

This is for v7.0 using the Brine template family.

If you remove the line blocks the number four (nth-child) will need to be adjusted. Probably two if you remove all the line blocks. Test that the order is right on mobile before doing so.

Let us know how it goes.

Fixes the order perfect but reverts back when I remove the line blocks.

Link to comment
  • 0
17 hours ago, creedon said:

After you removed the lines did you change the 4 to 2 as I suggested?


#page-5e1df5f56b4ecf142af1d0d5>.sqs-row .sqs-row:nth-child( 2 ) {

 

So sorry I missed that in your last message. It works perfect, thank you so much!

If time allows, might I ask for your help on these two other threads I'm needing help on?

 

 

Link to comment
  • 0
On 3/19/2021 at 12:34 AM, SouthernSunEvents said:

So sorry I missed that in your last message. It works perfect, thank you so much!

If time allows, might I ask for your help on these two other threads I'm needing help on?

 

 

Have you solved both yet?

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
  • 0

Hi @tuanphan

I have a similar issue. I can't seem to 

Site: covenantchambers.squarespace.com

Password: CovenantChambers

https://covenantchambers.squarespace.com/lee-ee-yang

If you look at the URL above, in mobile mode, its currently image - text1 - text2. I need it to be image - text2 - text1.

The "Contact, Education..." block needs to be below the "Lee Ee Yang, Managing Director..."  block.

 

Appreciate all the help! Thanks.

Regards,
Sherman

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