Irksome image layout changes on mobile!

Site URL: http://www.peaceofmindediting.com

Hello friends!

I'm wondering if there's some kind of a workaround here that I'm missing.

On desktop, the layout is as intended -- three images side by side in a row. This is the goal on mobile as well! But I'm not sure if it's possible.

Attached are two screenshots -- one of the desktop view and the other on mobile. As you can see, on mobile, the third image is below the other two, making for some wasted, empty space. 

Wondering if any solutions exist?

Thanks in advance!

On 7/15/2021 at 11:36 PM, robpeace said:

Site URL: http://www.peaceofmindediting.com

Hello friends!

I'm wondering if there's some kind of a workaround here that I'm missing.

On desktop, the layout is as intended -- three images side by side in a row. This is the goal on mobile as well! But I'm not sure if it's possible.

Attached are two screenshots -- one of the desktop view and the other on mobile. As you can see, on mobile, the third image is below the other two, making for some wasted, empty space. 

Wondering if any solutions exist?

Thanks in advance!

Hi. Add to Design > Custom CSS

/* mobile 3 images same row */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1625794547658_86862 .slide {
    width: 33.3333% !important;
}
}

@tuanphan I JUST now noticed that you responded to this post with that custom code.  It works - thank you so much!  Incredibly helpful -- honestly, thank you.