Two columns for home page and blog page for mobile

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

Hello, I've searched and found various similar questions to this, but I'm still stumped.

I want to have two columns displayed side by side on the mobile version of my site for both the home and blog pages (or at least just the blog page). 

Can anyone help? I'm a complete novice with squarespace and coding so if you can help, please tell me exactly where to place the code too. 

Thank you!

On 2/18/2022 at 7:19 PM, Samui said:

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

Hello, I've searched and found various similar questions to this, but I'm still stumped.

I want to have two columns displayed side by side on the mobile version of my site for both the home and blog pages (or at least just the blog page). 

Can anyone help? I'm a complete novice with squarespace and coding so if you can help, please tell me exactly where to place the code too. 

Thank you!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.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;
}
}

This doesn't appear to work for me. Tried two other codes from another thread too... my site page is

www.pretty-positive.co.uk/blog

1 minute ago, prettypositivejksnmedia said:

This doesn't appear to work for me. Tried two other codes from another thread too... my site page is

www.pretty-positive.co.uk/blog

 

i have 'basic grid blog' and i assume that's why, as the code is for list?

On 10/26/2022 at 6:11 PM, prettypositivejksnmedia said:

i have 'basic grid blog' and i assume that's why, as the code is for list?

Try adding this CSS

@media screen and (max-width:767px) {
.tweak-blog-basic-grid-width-inset .blog-basic-grid {
    grid-template-columns: repeat(2,1fr);
    display: grid;
}
}

On 10/31/2022 at 9:23 AM, tuanphan said:

Try adding this CSS

@media screen and (max-width:767px) {
.tweak-blog-basic-grid-width-inset .blog-basic-grid {
    grid-template-columns: repeat(2,1fr);
    display: grid;
}
}

 

Doesn't appear to alter anything, but wasn't a necessity, so no worries.

Thank You anyway 🙂