Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


brndnr92

Question

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

Edited by brndnr92
Link to comment
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 0

@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

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
  • 0
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. 

 

Link to comment
  • 0

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;}
}
}
Link to comment
  • 0
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.

image.thumb.png.09167b41ac11f676db4ffff0b88dd8f1.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...