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 post
  • Answers 63
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#page-5dc48a5090367c2c43071590>.row.sqs-row { display: flex; flex-direction: column-reverse; } }  

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_170

Can you share link to your site& describe in detail? We can help easier.   Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1594

Posted Images

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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

image.thumb.png.67d79090944a9603bcee54f7bdd04b77.png

image.png

Link to post
  • 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 post
  • 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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 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 post
  • 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 post
  • 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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 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 post
  • 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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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