Avenue: Change block order on mobile?

12 minutes ago, theokoustas said:

Hi the desktop padding   worked perfectly thank you so much! One last thing and im done... the top and bottom padding in mobile version did not work, Also I would love to donate for your services where can I do that? Thanks again for your patience

 

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

On 4/25/2020 at 9:39 AM, tuanphan said:

Add to Last Line in Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1587744359724_8306 {
    margin-top: 0 !important;
    position: static !important;
}
}

 

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

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

2 minutes ago, tuanphan said:

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

 

You are a lifesaver! Thank you so much. 🙂

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

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

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

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?

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

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?

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

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!

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

Thank you so much @tuanphan!

@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

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.

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

Trying to switch these two image blocks on mobile view too. Any code tips?

www.southernsunevents.com

PW: sse2020

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

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.

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.

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.

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.

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!

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

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.

26 minutes ago, SouthernSunEvents said:

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

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

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

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?

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?