Summary Block Column on Mobile

Site URL: https://www.putonlovestory.com

Hello,

I was able to use custom CSS to make the summary block appear as Two columns on the mobile. However, I see that it skips a few rows and I would also like a "space" in between the column photos. Would you kindly help with these two? Thank you so so much,

On 12/4/2021 at 9:59 AM, POLS said:

Site URL: https://www.putonlovestory.com

Hello,

I was able to use custom CSS to make the summary block appear as Two columns on the mobile. However, I see that it skips a few rows and I would also like a "space" in between the column photos. Would you kindly help with these two? Thank you so so much,

 

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
	section[data-section-id="61aaca825d821d20cfbf41c6"] {
		.summary-item-list {
			display: grid;
			grid-template-columns: repeat(2,1fr);
			grid-gap: 10px;
		}
		.summary-item {
			width: 100% !important;
		}
	}
}

Change grid-gap value to change space between item

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing result

It worked like magic! Thank you so so much 😭