Jump to content

Summary block customization CSS

Go to solution Solved by Ziggy,

Recommended Posts

My partners page (see url) does not look very good on mobile.

I have created the partner-page with a summary block (actually 3 summary blocks for different partner categories) where I have used Custom CSS to hide the item title and make the summary-thumbnail (partner-logo) smaller.

As a result of the first two changes, I also needed to move the exerpt up a bit to minimize the void after the smaller logo.

/* PARTNER-LIST CUSTOMIZATIONS */

//Summary page customization

//Hide Item Title
[data-section-id="64ba28c2818bb86d1650b942"] *
.sqs-block-summary-v2 .summary-title {
display: none;
}

//Make Logo smaller
[data-section-id="64ba28c2818bb86d1650b942"]
.sqs-block-summary-v2 .summary-thumbnail img{
  border-radius:20px;
  max-width: 50%;
  max-height: 50%;
}

//Move excerpt up to match smaller logo
[data-section-id="64ba28c2818bb86d1650b942"]
.sqs-block-summary-v2 .summary-excerpt {
  margin-top: -180px;
}
/* END PARTNER-LIST CUSTOMIZATIONS */

These customizations are what is causing a bad experience on the mobile.  (see attached examples of the current full-screen view and mobile view)

If I remove this custom CSS for the section, it looks great on mobile, but not good at all on a full size screen.

I have not used resolution specific CSS before, but have found some posts here on the forum that's suggesting that it should be possible to do what I need. But I haven't been able to figure out how to use this exactly in my example.

Could anyone please clarify for me how to make my CSS Customization code above specific for full-screen only?

image.png

image.png

Link to comment
  • Solution

First can you share your website URL and this page?

Second, you can use media querries to adjust CSS based on viewport size.

Something like this may work:

//Move excerpt up to match smaller logo
@media only screen and (min-width:768px) {
[data-section-id="64ba28c2818bb86d1650b942"]
  .sqs-block-summary-v2 .summary-excerpt {
    margin-top: -180px;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
27 minutes ago, Ziggy said:

First can you share your website URL and this page?

Second, you can use media querries to adjust CSS based on viewport size.

Something like this may work:

//Move excerpt up to match smaller logo
@media only screen and (min-width:768px) {
[data-section-id="64ba28c2818bb86d1650b942"]
  .sqs-block-summary-v2 .summary-excerpt {
    margin-top: -180px;
  }
}

Thanks @Ziggy

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.