Avenue: Change block order on mobile?

On 4/17/2020 at 3:42 AM, brigidc.campbell said:

@tuanphan I love my design on desktop but when I resize to mobile, all of my items stack incorrectly. I tried to use the Squarespace support page and align them differently but I am still getting the same issue. It seems squarespace is stacking everything that appears on the left column first, then the right column whereas I would like the items that are horizontally aligned on desktop to stack below each other on mobile.

 

Is there any custom code to re-order the arrangement of these items? 

 

Site Link: https://www.potionsnmotions.com/products

What is correct order on mobile?

text - image - text - image

or image-  text - image - text

or?

@tuanphan I went with a different layout so that I didn't have to code in order to fix the block order. 

Hi @tuanphan!

First of all, you've been a big help in general in this forum and thank you! Im on 7.1, and have around 6 images with overlay links on top of them. and they go in twos as u scroll down, On mobile version its starts with the first picture (Left) then second block (right) and so on... but for some reason the 4th picture(desktop on the right) is in the 5th position in mobile version wtf!  Lastly, can i have the block images be in full bleed ( like touch the edges of the screen and with eachother? in other words no padding in this specific area) thanks! 

1 hour ago, theokoustas said:

Hi @tuanphan!

First of all, you've been a big help in general in this forum and thank you! Im on 7.1, and have around 6 images with overlay links on top of them. and they go in twos as u scroll down, On mobile version its starts with the first picture (Left) then second block (right) and so on... but for some reason the 4th picture(desktop on the right) is in the 5th position in mobile version wtf!  Lastly, can i have the block images be in full bleed ( like touch the edges of the screen and with eachother? in other words no padding in this specific area) thanks! 

 

 

Can you share link to page in screenshot?

On 4/23/2020 at 3:49 PM, tuanphan said:

Can you share link to page in screenshot?

Hi @tuanphan,

sorry for the late reply! thank you

collie-collie-pedb.squarespace.com

pw: gkoustascare123

Hello @tuanphan, you seem to be the pro at reordering elements on mobile view! I've tried to use the CSS you provided for another client as I have the same query, but it doesn't seem to be working. I'm trying to get the paragraph text to the right of the image scroll to display before the images on mobile. The text box isn't even showing on mobile! I have to use "position: absolute" to get it to appear. When I do, it's hidden at the bottom of the page.

www.mcs-test.squarespace.com
Password: test

Would much appreciate your speedy help! 

16 hours ago, merakiconceptstudio said:

Hello @tuanphan, you seem to be the pro at reordering elements on mobile view! I've tried to use the CSS you provided for another client as I have the same query, but it doesn't seem to be working. I'm trying to get the paragraph text to the right of the image scroll to display before the images on mobile. The text box isn't even showing on mobile! I have to use "position: absolute" to get it to appear. When I do, it's hidden at the bottom of the page.

www.mcs-test.squarespace.com
Password: test

Would much appreciate your speedy help! 

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

Hi @tuanphan!

First of all, you've been a big help in general in this forum and thank you! Im on 7.1,  can i have the block images be in full bleed ( like touch the edges of the screen and with eachother? in other words no padding in this specific area) thanks! 

collie-collie-pedb.squarespace.com

pw: gkoustascare123

35 minutes ago, theokoustas said:

Hi @tuanphan!

First of all, you've been a big help in general in this forum and thank you! Im on 7.1,  can i have the block images be in full bleed ( like touch the edges of the screen and with eachother? in other words no padding in this specific area) thanks! 

 

collie-collie-pedb.squarespace.com

pw: gkoustascare123

 

Which images? Can you take screenshot?

4 minutes ago, tuanphan said:

Which images? Can you take screenshot?

3 minutes ago, theokoustas said:

 

Add to Home > Design > Custom CSS

[data-section-id="5e73347bc0821f49f60360e0"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

4 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

[data-section-id="5e73347bc0821f49f60360e0"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

 

So yea this happened just a bit of grey was added on some edges!

6 minutes ago, theokoustas said:

So yea this happened just a bit of grey was added on some edges!

 

Can you keep the code? I will check again.

Also, which plan do you use? Personal or Business

1 minute ago, tuanphan said:

Can you keep the code? I will check again.

Also, which plan do you use? Personal or Business

Business! Also I guess I can just do each image on its own... its 17px rightt now around each image... instead of content wrapper do i put the class id of that specific image mabey? 

6 minutes ago, theokoustas said:

Business! Also I guess I can just do each image on its own... its 17px rightt now around each image... instead of content wrapper do i put the class id of that specific image mabey? 

I see it works here? Try adding this code to Home > Settings > Advanced > Code Injection > Footer

<style>
  [data-section-id="5e73347bc0821f49f60360e0"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
</style>

When you're done, reload your site & see result

4 minutes ago, tuanphan said:

I see it works here? Try adding this code to Home > Settings > Advanced > Code Injection > Footer

<style>
  [data-section-id="5e73347bc0821f49f60360e0"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
</style>

When you're done, reload your site & see result

Thank you very much, it worked on the mobile version but i also want it on the desktop version if possible! ( I understand its not in the subject of the forum)

1 minute ago, theokoustas said:

Thank you very much, it worked on the mobile version but i also want it on the desktop version if possible! ( I understand its not in the subject of the forum)

Above code for Desktop version ☘️

Its not working in the desktop version 😕 P.s I also wanted and top and bottom btw 0 padding!

8 minutes ago, tuanphan said:

Above code for Desktop version ☘️

Its not working in the desktop version 😕 P.s I also wanted and top and bottom btw 0 padding! I might just go back to 7.0 man this 7.1 is terrible 😞 So little information online and its so limitted, anyways if u cant find what it is im just gunna start over... Thanks alot for everything

6 minutes ago, theokoustas said:

Its not working in the desktop version 😕 P.s I also wanted and top and bottom btw 0 padding! I might just go back to 7.0 man this 7.1 is terrible 😞 So little information online and its so limitted, anyways if u cant find what it is im just gunna start over... Thanks alot for everything

Can you take screenshot your site? 

remove padding top/bottom, add this to above code

padding-bottom: 1px !Important;

padding-top: 1px !important;

--

collie-collie-pedb.squarespace.com

pw: gkoustascare123

7 minutes ago, tuanphan said:

Can you take screenshot your site? 

remove padding top/bottom, add this to above code

padding-bottom: 1px !Important;

padding-top: 1px !important;

--

collie-collie-pedb.squarespace.com

pw: gkoustascare123

So the bottom and top padding didnt work what u sent me that i added to the previous content wrapper in the injection code.... Anyways desktop version is not getting affected either.

3 minutes ago, theokoustas said:

So the bottom and top padding didnt work what u sent me that i added to the previous content wrapper in the injection code.... Anyways desktop version is not getting affected either.

 

Do you use Larger screen? Top/bottom padding, you mean section padding or image blocks padding?

Edit above code to this

[data-section-id="5e73347bc0821f49f60360e0"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 1px !Important;
    padding-top: 1px !important;
    max-width: 100% !important;
}

2 hours ago, tuanphan said:

Do you use Larger screen? Top/bottom padding, you mean section padding or image blocks padding?

Edit above code to this

[data-section-id="5e73347bc0821f49f60360e0"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 1px !Important;
    padding-top: 1px !important;
    max-width: 100% !important;
}

 

Yea, I want image padding... top and bottom...Also the code didnt work again for the desktop version  xD

On 4/25/2020 at 10:58 PM, theokoustas said:

Yea, I want image padding... top and bottom...Also the code didnt work again for the desktop version  xD

Can you take screenshot? It worked here.

With image padidng top/bottom, add to Home > Design > Custom CSS

[data-section-id="5e73347bc0821f49f60360e0"] .image-block {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

1 hour ago, tuanphan said:

Can you take screenshot? It worked here.

With image padidng top/bottom, add to Home > Design > Custom CSS

[data-section-id="5e73347bc0821f49f60360e0"] .image-block {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

 

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