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

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! 

Screen Shot 2020-04-23 at 14.35.30.png

Screen Shot 2020-04-23 at 14.35.53.png

Link to comment
  • 0
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?

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

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! 

Link to comment
  • 0
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;
}
}

 

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

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

 

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

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

Link to comment
  • 0
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

image.thumb.png.9ad9d1d4c21a86e4da08b0f0dda5ad6e.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
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

image.thumb.png.9ad9d1d4c21a86e4da08b0f0dda5ad6e.png

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)

Link to comment
  • 0
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 ☘️

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

Link to comment
  • 0
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;

image.thumb.png.4a39c5078595bc55300483a3d3a349ec.png

--

collie-collie-pedb.squarespace.com

pw: gkoustascare123

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

image.thumb.png.4a39c5078595bc55300483a3d3a349ec.png

--

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.

1561613414_new2.thumb.png.53bf01056fc498ad95cfc6ff6eb48a7e.png

Link to comment
  • 0
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;
}

 

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

Link to comment
  • 0
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;
}

 

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

Screenshot 2020-04-27 13.34.28.png

Link to comment
  • 0
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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...