Misaligned blog posts on mobile

Site URL: http://everystory.co.uk/journal

Hello! I added some code to make the blog post summary show in two columns on mobile. However, the top two posts seem to be misaligning (screenshot attached). Would very much appreciate some expert advice, thank you in advance!

Here is the code I added:

@media screen and (max-width:727px) {
.summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
section.BlogList {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
}

Use this new code

@media screen and (max-width:640px) {
.summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
section.BlogList {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
section.BlogList>article {
    padding-top: 0 !important;
    margin-top: 0 !important;
}}

On 10/8/2022 at 10:24 AM, tuanphan said:

Use this new code

@media screen and (max-width:640px) {
.summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
section.BlogList {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
section.BlogList>article {
    padding-top: 0 !important;
    margin-top: 0 !important;
}}

 

Thank you so much @tuanphan! I there a way the rows can be spaced without creating too much space at the top underneath the copy? Have attached a screenshot to hopefully explain.

38 minutes ago, tuanphan said:

Use this new code

@media screen and (max-width:640px) {
.summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
section.BlogList {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
	grid-row-gap: 20px;
}
section.BlogList>article {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body#collection-5e9f3fccf8e45c4ccb23885e .columns-12 {
    padding-bottom: 0px;
}}

 

Thank you so much @tuanphan thats worked perfectly!