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

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!
 

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;
}
}

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?

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);
}
}

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.

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?