Trying to show 3 columns for basic grid blog layout on Brower Template on mobile

Site URL: https://octagon-helix-65yc.squarespace.com/

Hey all. I've been playing around with the Brower template for a blog. On my desktop,  when I choose the basic grid blog layout or the masonry blog layout it lets you adjust the number of columns and displays it accurately on the desktop but not on mobile. Is there a way to jump into CSS and change this for mobile? So far I've tried this for 3 columns:

@media only screen and (max-width: 640px) {
.blog-basic-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}
}

This hasn't been working however. Also I guess I would also be looking for custom css to make this work  for the masonry blog layout on mobileas well. Any help ius much appreciated. Thank you!

Password for the site is: bran

@brndnr92 try adding this to your custom CSS

 

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

I'd go with 2 columns on mobile, 3 could make the content pretty squished

1 hour ago, RyanDejaegher said:

@brndnr92 try adding this to your custom CSS

 

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

I'd go with 2 columns on mobile, 3 could make the content pretty squished

@RyanDejaegher this worked! Thanks a ton.  If I went with the masonry blog layout would the CSS be somewhat similar?

@media only screen and (max-width:640px) {
.blog-masonry{
    display: grid;
  grid-template-columns: repeat(2, 1fr);}
}

I tried that and it seems like two columns were created with the masonry layout, however all the content is only in the column to the left while the right column remains empty. 

Or, is it possible to keep the desktop version under the 'blog masonry' layout and keep the mobile version as the 'blog basic grid' layout with two columns. I've attempted to do that as well with this:

#collection-5f302214b38b953003774a45 {
@media only screen and (max-width:640px) {
.blog-basic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr)!important;}
}
}

Mixing and matching a masonry grid with another grid would get a bit tricky because the way Squarespace lays out images with the masonry grid, so I'd say that won't be the best solution

Hi Ryan, would you possibly know how to add border-radius and drop shadow do the thumbnail images in the blog grid?

Thanks heaps,

Annie

https://upowr.co/news

On 12/15/2020 at 5:44 PM, anneline_sundby said:

Hi Ryan, would you possibly know how to add border-radius and drop shadow do the thumbnail images in the blog grid?

Thanks heaps,

Annie

https://upowr.co/news

Add to Home > Design > Custom CSS

article.blog-item>div:first-child a {
    border-radius: 20px;
    box-shadow: 5px 10px 20px red;
}

I see your site, some page has very long content. You can consider adding a back to top button.

Also, on About Page, Tablet, some text not align. If you need to fix, we can give the code.