2 columns in mobile

Hi there,

Try this CSS:

@media (max-width: 768px) {
    .wp-show-posts-columns .wp-show-posts-single {
        width: 50%;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Hi Leo, Thanks for the CSS.

It works but there's no space in between. Please take a look. Thanks!

Try this:

@media (max-width: 767px) {
    body .wp-show-posts-columns, body .wp-show-posts-inner {
        margin-right: 10px !important;
    }
}

Hi Leo,

That code made the post single column again. Any way to fix it?

Thanks!

I don't see this code being added anymore?

Hi Leo, that's strange. I added the code and it's still there. The 2nd code made the post width in mobile a bit smaller as opposed to splitting it into two.

Thanks!

I'm looking at your CSS and definitely don't see the first block of code:
https://generatepress.com/forums/topic/2-columns-in-mobile/#post-1320019
https://www.screencast.com/t/ZVjUZr8glz

You are also missing a closing bracket here:

@media (max-width: 768px) {
	.post-image img {
		max-width: 100%;
	}

Hi Leo, my apologies. I thought I was supposed to replace the second CSS with the first. Everything works perfectly now!

Thank You!

No problem :)