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

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

 

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

--- Happy New Year

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

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

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

--- Happy New Year

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

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

--- Happy New Year

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

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

--- Happy New Year

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

 

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

--- Happy New Year

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

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

 

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

--- Happy New Year

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