Jump to content

Reorder blocks in mobile view and aligning text vertically to an image

Recommended Posts

Posted

Site URL: https://www.dianatantillo.net/storyboards

Hello, 

I know I have seen the comment of reordering blocks on mobile and I have tried a few of the solutions offered, but I just don't know what I'm doing wrong. I have on desktop:

[gallery] [text]
[text] [gallery]

And for mobile I want the image gallery to be above the text, but no matter what I try it doesn't seem to do it. 

I want

My other question has to do with aligning vertically text. I would like the text next to these gallery block to be centered with them. What I have right now I did with spacers, but the smaller the screen the lower the text gets because of the spacers.

The page in question is this one specifically: https://www.dianatantillo.net/storyboards

Screen Shot 2021-04-14 at 5.16.59 PM.png

Screen Shot 2021-04-14 at 5.17.25 PM.png

  • Replies 3
  • Views 530
  • Created
  • Last Reply
Posted

Q2. It looks like you solved?

Q2. To reorder, add this to Design > Custom CSS

/* gallery text gallery text */
@media screen and (max-width:767px) {
div#page-5a6211a29140b79a6ad6d67e .span-12>.row:nth-child(3), div#page-5a6211a29140b79a6ad6d67e .span-12>.row:nth-child(5) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            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!)

Posted
On 4/15/2021 at 10:41 AM, tuanphan said:

Q2. It looks like you solved?

Q2. To reorder, add this to Design > Custom CSS


/* gallery text gallery text */
@media screen and (max-width:767px) {
div#page-5a6211a29140b79a6ad6d67e .span-12>.row:nth-child(3), div#page-5a6211a29140b79a6ad6d67e .span-12>.row:nth-child(5) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

 

This worked! Thank you! I just had to change the nth-child numbers to be even numbers instead. But this worked! Thank you so much!!

Posted
On 4/22/2021 at 9:28 PM, mellowyellowsocks said:

This worked! Thank you! I just had to change the nth-child numbers to be even numbers instead. But this worked! Thank you so much!!

Do you want to fix these?

Site URL: https://www.dianatantillo.net/

1. (Tablet-Animation) Header overlap banner

dianatantillo.net-01-min.png

2. (Overlay Menu) Change branding arrow to yellow?

dianatantillo.net-02-min.png

3. (Mobile-Storyboarding) Make image fullsize?

dianatantillo.net-03-min.png

4. (Mobile-Maria Comic) Add a space above text?

dianatantillo.net-04-min.png

5. (Overlay Menu) Align email icon – about item?

dianatantillo.net-05-min.png

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

Archived

This topic is now archived and is closed to further replies.

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