Jump to content

reordering content for mobile view – flex-direction: column-reverse; not working

Recommended Posts

Site URL: https://www.leannes.co/

Hello!

On my homepage I have a portrait image of me that is centrally aligned with some copy. When viewed on mobile, I would like the image to be cropped to fit a landscape format and sit above the copy, not beneath it. 

When I apply:
display: flex;
flex-direction: column-reverse; 
within mobile tags then the copy stops being centrally aligned, when viewed on desktop and instead aligns along the top. If I add "align-items: center;" to the main CSS then it stops the columns reversing when viewed on mobile. So I'm clear this is how I'd like it to view:

On Desktop
Copy left and image right but aligned centrally

On mobile
Image stacked above copy and, if possible, for the image to be cropped to a landscape format

Can anyone help with this please? Thank you!
 

Edited by Leanne_M
site now live
Link to comment

It looks like you sent me an email & I sent code. I'm not sure If you have received it or yet.

I don't remember code to make image fit, but to change order of image/text, add this to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-62125653da85e03d494041f8>.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
44 minutes ago, tuanphan said:

It looks like you sent me an email & I sent code. I'm not sure If you have received it or yet.

I don't remember code to make image fit, but to change order of image/text, add this to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-62125653da85e03d494041f8>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

@tuanphan That works now! Thank you.

I haven't emailed you but you have previously tried to help me with this but the earlier code wouldn't work for some reason. Is it possible to resize/crop the image to landscape on mobile as well?

Link to comment
On 3/10/2022 at 8:06 PM, Leanne_M said:

@tuanphan That works now! Thank you.

I haven't emailed you but you have previously tried to help me with this but the earlier code wouldn't work for some reason. Is it possible to resize/crop the image to landscape on mobile as well?

If make image landscape, it looks ugly. You can use this code to replace mobile with a new image

/* Mobile - Leanne Co image */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1645368206862_10515 img {
    content: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg);
}
}

 

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 3/13/2022 at 12:22 PM, tuanphan said:

If make image landscape, it looks ugly. You can use this code to replace mobile with a new image

/* Mobile - Leanne Co image */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1645368206862_10515 img {
    content: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg);
}
}

 

Thank you @tuanphan, I'll give that a try.

Link to comment
  • 5 months later...
On 8/26/2022 at 11:15 AM, sophiemurfittdesign said:

Hey @tuanphan, I'm wondering if you might be able to help me as I've got a similar problem. 

The site is - twinlakes.com.au

See home page, 5th (fish photo) and 6th (heading says bucket list activities) section down.

The code I'm using is below and for some reason it's not working. Any help would be greatly appreciated, thank you. 

/*------------------------------------
*  REVERSE SWITCH IN MOBILE + SPLIT SCREEN DESKTOP - 92'
*-----------------------------------*/
[data-current-styles*='"customContentWidth": 52'] {
@media @mobile {
  .sqs-row {
    display: -webkit-flex !important;
    -webkit-flex-direction: column-reverse !important;
    display: flex !important;
    flex-direction: column-reverse !important;
  } 
}
  
  //split 50% screen//
@media @desktop {
    width: 50% !important;
    display:block;

    .content-wrapper {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }

  }
}

Hi,

What should it look like?

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.