Jump to content

3 column summary block across all screen sizes (except mobile)

Recommended Posts

Hi there! I am trying to keep my blog summary block as 3 columns until it hits mobile. Currently on my large screen it's at 3 columns but when I go to a smaller laptop size it goes into 2 and so there's one image on it's own line. Is there CSS I can apply to prevent this from happening? I'd like it to be 3 columns even at tablet size. Thanks!

 

Please note that the site is launching Tuesday so you won't be able to see it yet, but I've attached a screenshot for your reference. Thanks! 

image.png

Link to comment
  • Replies 3
  • Views 710
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

7 hours ago, tifflee said:

Hi there! I am trying to keep my blog summary block as 3 columns until it hits mobile. Currently on my large screen it's at 3 columns but when I go to a smaller laptop size it goes into 2 and so there's one image on it's own line. Is there CSS I can apply to prevent this from happening? I'd like it to be 3 columns even at tablet size. Thanks!

 

Please note that the site is launching Tuesday so you won't be able to see it yet, but I've attached a screenshot for your reference. Thanks! 

image.png

Can you share your URL with protected password so I can take a look?

Site-wide passwords – Squarespace Help Center

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 4/8/2024 at 11:33 PM, tifflee said:

www.organikhomedesign.com
pass: nancytom1!

**I am hoping for CSS to ensure that I can keep these on 3 on a row even on smaller screens such as tablet and laptop. 

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

@media screen and (max-width:1100px) and (min-width:768px) {
div#block-4df688642d9b617efc31 .summary-item-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 10px 10px;
}
div#block-4df688642d9b617efc31 .summary-item {
    width: 100% !important;
    margin: 0 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.