How to make an image with text float beside each other in Mobile view

Just wondering if anyone can help with an issue I am facing.

I have a card image block on my home page of my website (image with text to the right hand side of it)

and when i go into mobile view the image will stack ontop of the text, Whereas I want the image and text to sit next to eachother like how it is in Desktop view (Image with text to the right hand side)

Any help or any recommendations of Custom CSS i can add will be very helpful!

Ive attached some photos for context. 

Can you share link to page in screenshot? We can help easier

of course! I'm not sure if you'll be able to access it as i haven't published it yet and its still private.

Will I have to publish it for you to help me? 

Ive just made it public for you to see, the url is http://daronprice.com.au

On 1/27/2021 at 7:32 PM, DaronP said:

Ive just made it public for you to see, the url is http://daronprice.com.au

 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-1b64e265f8231f61509a figure {
    display: flex;
}
div#block-1b64e265f8231f61509a figure>div {
    padding-right: 10px;
}
}

Hi Tuanphan, I have a similar request to DaronP but I need the text and image blocks to appear side by side on mobile across my whole site except the home page, would you be able to assist?

https://menar-website.squarespace.com/home

Password: Menar@2021

2 hours ago, Menar said:

Hi Tuanphan, I have a similar request to DaronP but I need the text and image blocks to appear side by side on mobile across my whole site except the home page, would you be able to assist?

https://menar-website.squarespace.com/home

Password: Menar@2021

 

Can you share link to page in screenshot?

https://menar-website.squarespace.com/overview

3 hours ago, tuanphan said:

Can you share link to page in screenshot?

https://menar-website.squarespace.com/overview

2 hours ago, Menar said:

https://menar-website.squarespace.com/overview

I think stacked with image on top will be better.

To make them side by side, add to Design > Custom CSS

/* Mobile-Overview-Image text */
@media screen and (max-width:767px) {
div#page-section-60865d9b67faf379749b1391>.row>.col:nth-child(n+2) {
    width: 50% !important;
    float: left !important;
}
}

Thank you! 🙂

Could I also please try your 'I think stacked with image on top will be better' suggestion?

On 5/27/2021 at 5:01 PM, Menar said:

Could I also please try your 'I think stacked with image on top will be better' suggestion?

Add to Design > Custom CSS

/* Mobile-Overview */
@media screen and (max-width:767px) {
div#page-section-60865d9b67faf379749b1391 {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-60865d9b67faf379749b1391 * {
    text-align: left !important;
}
}