How to get images to appear in a row instead of underneath

[WeAreHere]

Currently have two images with text overlay but they are stacking on top of each other but I would like them to display both on the same row.

This is for gift subscription and personal subscription here:

https://2erndh1sn8pnpwwh-66362147057.shopifypreview.com

There's also 4 images above that I would like the text to appear underneath instead of to the left hand side and have the images appear 4 in a row on desktop and 1 in a row on mobile.

Thanks so much,

Em

[ZenoPageBuilder]

Hello @WeAreHere 👋

First of all, just want to say your store design is very creative, I like it a lot.

To make the 2 banners be next to each other, inside Shopify Admin, go to Themes, Edit code, open file theme.css (or theme.css.liquid, theme.scss, theme.scss.liquid) and add this code snippet at the bottom

@media (max-width: 1023px) {
#shopify-section-template--16498384437489__166429558283573843 {
    width: 50%;
    float: left;
}
}

The result on desktop

If you want to apply it on mobile also, just remove the @media wrapper from the code, but I think it is better to leave the mobile version unchanged. Hope that helps!

[WeAreHere]

Thanks for the kind words!

I've popped the code in but unfortunately it hasn't changed anything.

It's under - assets - theme.css

Any ideas what I might be doing wrong?

Thanks!

[ExpertRookie]

Hi @WeAreHere
In this case you can try to find settings in section theme setting.
If the theme does not support for the layout as you want, I think we need to update in the theme code to make your page looks good on all devices.