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 🙂 

Hi there, I've just used this code to make my blog into two columns, but wondering how to adjust the padding in between them so that the photos of adjacent posts are not touching each other. Thanks so much! Warmly, Briar

Also hoping to find a way to retain the desktop view of the formatting of each individual blog post, but on mobile. i.e. I'd like to disable the mobile view, but only on blog posts. Thank you so much!

On 2/4/2024 at 2:13 AM, marbleandmilkweed said:

Hi there, I've just used this code to make my blog into two columns, but wondering how to adjust the padding in between them so that the photos of adjacent posts are not touching each other. Thanks so much! Warmly, Briar

You can add grid-gap

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

On 2/4/2024 at 2:22 AM, marbleandmilkweed said:

Also hoping to find a way to retain the desktop view of the formatting of each individual blog post, but on mobile. i.e. I'd like to disable the mobile view, but only on blog posts. Thank you so much!

Can you share link to your blog page?

Oh perfect, thanks so much! The grid-gap works wonderfully! My blog page is here: https://www.marbleandmilkweed.com/journal

On 2/6/2024 at 3:42 AM, marbleandmilkweed said:

Oh perfect, thanks so much! The grid-gap works wonderfully! My blog page is here: https://www.marbleandmilkweed.com/journal

You mean keep 3 blog/row on mobile? The text will be very small

The two posts per row on the main blog page is working perfectly! But hoping to disable mobile view on individual blog posts themselves, not on the blog page. I have my posts formatted with 2 photos next to each other and mobile view stacks them, which I don't like. Not sure if this is possible...

On 2/12/2024 at 1:46 AM, marbleandmilkweed said:

The two posts per row on the main blog page is working perfectly! But hoping to disable mobile view on individual blog posts themselves, not on the blog page. I have my posts formatted with 2 photos next to each other and mobile view stacks them, which I don't like. Not sure if this is possible...

Can you share link to a blog post with problem? We can check easier

Sure! An example of the type of page I'd like to always display in desktop view is: https://www.marbleandmilkweed.com/journal/2024/1/27/anintuitiveshift

Thank you again so much for taking a look at this!

On 2/16/2024 at 2:40 AM, marbleandmilkweed said:

Sure! An example of the type of page I'd like to always display in desktop view is: https://www.marbleandmilkweed.com/journal/2024/1/27/anintuitiveshift

Thank you again so much for taking a look at this!

I see you are using Image Blocks. If you use Gallery Block Grid, we can target all blog posts easier.

But with Image Blocks, each blog post will require a different code.

You can also use this code to Website Tools > Custom CSS

@media screen and (max-width:767px) {
div.blog-item-content.e-content .span-6 {
    width: 50% !important;
    float: left !important;
}
}

This code worked brilliantly, thank you so much!

I have used a few gallery blocks here and there in other blog posts, curious to know what the code would be for also showing those in desktop view. Thanks again so much in advance!

A summary block, rather!

On 2/24/2024 at 1:36 AM, marbleandmilkweed said:

I have used a few gallery blocks here and there in other blog posts, curious to know what the code would be for also showing those in desktop view. Thanks again so much in advance!

You mean show 2 columns or? Can you share link to some blog posts?

I've just realized that my summary blocks are doing this automatically in the blog posts, but my gallery blocks are not. For instance in this post, I have 3 photos in a horizontal line in the desktop view, but they get stacked as two next to each other and then one below, on the mobile view, which is a bit awkward, as it leaves a big empty space. As in this post: https://www.marbleandmilkweed.com/journal/2022/7/21/summertea

On 2/27/2024 at 1:24 AM, marbleandmilkweed said:

I've just realized that my summary blocks are doing this automatically in the blog posts, but my gallery blocks are not. For instance in this post, I have 3 photos in a horizontal line in the desktop view, but they get stacked as two next to each other and then one below, on the mobile view, which is a bit awkward, as it leaves a big empty space. As in this post: https://www.marbleandmilkweed.com/journal/2022/7/21/summertea

Try some CSS code like this

@media screen and (max-width:767px) {
	body[class*="type-blog"] .slide {
		width: 50% !important;
}
}

Hmm, have just tried this, but it doesn't seem to work on the gallery blocks in that post...

On 3/2/2024 at 5:22 AM, marbleandmilkweed said:

Hmm, have just tried this, but it doesn't seem to work on the gallery blocks in that post...

I see it already 2 columns