How can I display my mobile blog in two columns instead of one?

[RP9]

Hello! I am trying to make my blog on mobile appear as 2 columns instead of 1. Can anyone help direct me?

https://theflyplant.com/blogs/projects/

I believe I need to make the changes here but am stuck.

<img class="home-blog__media-img blog__img" src="//cdn.shopify.com/s/files/1/0530/6902/1355/articles/Rossoblu_5_360x.jpg?v=1668919508" srcset="
                                    //cdn.shopify.com/s/files/1/0530/6902/1355/articles/Rossoblu_5_360x.jpg?v=1668919508 360w 480h,
                                    //cdn.shopify.com/s/files/1/0530/6902/1355/articles/Rossoblu_5_540x.jpg?v=1668919508 540w 720h,
                                    //cdn.shopify.com/s/files/1/0530/6902/1355/articles/Rossoblu_5_720x.jpg?v=1668919508 720w 960h,
                                    //cdn.shopify.com/s/files/1/0530/6902/1355/articles/Rossoblu_5_900x.jpg?v=1668919508 900w 1200h,
                                    //cdn.shopify.com/s/files/1/0530/6902/1355/articles/Rossoblu_5_1080x.jpg?v=1668919508 1080w 1440h,
                                    //cdn.shopify.com/s/files/1/0530/6902/1355/articles/Rossoblu_5_1296x.jpg?v=1668919508 1296w 1728h
                                " sizes="(min-width: 768px) 50vw, (min-width: 981px) 33vw, 100vw" width="360" height="480" alt="ROSSOBLU" loading="lazy">

[GemPages]

Hi @RP9,

I would like to give you some recommendation to support you.

Please go to Online Store > Themes > click 3 dots button > Edit code > Theme.liquid and add code above the </body> tag  on the file Theme.liquid.

<style>
	@media(max-width: 425px) {
		body.template-blog #shopify-section-blog-template .blog__items .o-layout__item.u-1\/1 {
			width: 50% !important;
		}
	}
</style>

Eg:

I hope you find the answer helpful, if you need further support, do not hesitate to reach out to us.

Kind & Best regards,
GemPages Support Team.