Jump to content

Reorder blocks on mobile

Go to solution Solved by tuanphan,

Recommended Posts

Hello, I'm looking to rearrange the way my blocks are viewed on mobile. It gets wonky based on whether the picture/text is positioned no the left or right of the page. Is there any way to reorder them on mobile without having to change them on desktop?

I don't really care where the text goes, whether between the images or at the top but it should be consistent. I also have another (not shown in the pictures) where the pictures came first and then the text because the pictures are on the left of the page and text on the right. I'd like the mobile version to be text first and pictures shown after. 

The website is mushroom-perch-mfhm.squarespace.com (not launched yet) and the password is: hello

Screen Shot 2023-01-19 at 12.45.29 PM.png

Screen Shot 2023-01-19 at 12.45.47 PM.png

Screen Shot 2023-01-19 at 12.45.54 PM.png

Link to comment
  • Solution
On 2/1/2023 at 8:45 PM, HomeownerHQ said:

Yes that's right.

And following that, I was hoping to have "get all the details" and then the 3 images. Not the other way around.

Add to Design > Custom CSS

@media screen and (max-width:640px) {
/* Design consulting */
div#block-yui_3_17_2_1_1673524495573_8691+.row {
    display: flex;
    flex-direction: column;
}
div#block-yui_3_17_2_1_1673524495573_8691+.row .span-6 {
    order: 1;
}
/* get all the details */
section#index-features .columns-12>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/4/2023 at 6:12 AM, HomeownerHQ said:

Thank you!!

Another question relating to mobile... Is there a way for the logo in the footer to stay a small size on mobile? It always gets enlarged to fill the screen. 

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#footerBlocksBottom .image-block {
    width: 150px;
    margin: 0 auto;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
On 5/17/2023 at 6:08 AM, HomeownerHQ said:

Hi Tuanphan,

I was hoping to do the same on my other website but it didn't seem to work. Could you please do the same for the logo in the footer for homeownerhq.co?

You are using new editor (Fluid Engine) so you can edit Footer > click Mobile icon on top right > Then you can adjust position on mobile

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.