How can I display media and text side by side on mobile?

[StijnS]

Hi, 

Is it possible to get the media with text side by side on mobile like on the desktop? 

This is the website: 
https://600329-4.myshopify.com/blogs/news/hoeveel-watt-heeft-mijn-gitaarversterker-nodig

On the desktop it is nice side-by-side but on mobile it is stacked. 

[laddisahsi]

Hi @StijnS 

If we add media and text side by side in mobile them content and image will be display very small on mobile devices, So current format is looking good.

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

[Artzen_tech · Accepted solution]

Hello @StijnS 
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
.media-with-text.media-with-text--reverse {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.media-with-text__media {
    width: 48%;
}
.media-with-text__text {
    width: 50%;
}
.section__block p:first-child {
    font-size: 12px;
}
.section__block p {
    font-size: 14px;
}
.section__block ul {
    font-size: 14px;
}
</style>

look like this in mobile after add this css

But it not look good

Let me know if need further assistance
Regards,
Artzen Technologies

[StijnS]

Thanks, this worked. But you are right. It does not look really nice.