Jump to content

Make Summary Grid Look Like Gallery Page in Maple (Brine)

Recommended Posts

I'm trying to style a Summary Grid block to look like a Gallery Page in Maple. This is what the Gallery Page looks like:

962554557_ScreenShot2019-12-06at8_42_14AM.thumb.png.2a2f529ba301a0bac03bd1903e629077.png

This is what the Summary Grid looks like without any CSS:

2085774069_ScreenShot2019-12-06at8_39_43AM.thumb.png.709c152b69087a691394fc86c3f5577e.png

And this is what I have right now: 

422749020_ScreenShot2019-12-06at8_39_59AM.thumb.png.8f9d04d33fa4237cd61791e53c9410fe.png

Nowhere close to what I need it to be. This is the current CSS I've added:

.summary-title-link {
    position: relative;
    top: -200px;
    left: 0%;
    height: 100%;
    margin: 0px 0px 0px 0px;
    padding-top: 21px;
    padding-right: 21px;
    padding-left: 21px;
    z-index: 1;
    color: hsl(0, 1%, 22%);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .28em;
  	line-height: 2em;
    font-family: futura-pt;
    background: rgba(255, 255, 255, 0.8);
}

.sqs-block-summary-v2 .summary-excerpt {
    position: relative;
    top: -210px;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 1;
    color: hsl(0, 1%, 22%);
    text-transform: lowercase;
    font-weight: 400;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.8);
}

Here's the URL: https://thescoutgroup.com.au/properties-in-development

Any idea how to get Screenshot B to look like Screenshot A?

Kate Scott Logo

👩‍💻 Squarespace templates for service providers + course creators
📈 Teaching Squarespace designers how to scale by selling templates
🔎 Helping small business owners + entrepreneurs Grow with SEO

 

Link to comment
  • Replies 6
  • Created
  • Last Reply
3 minutes ago, katescott said:

@tuanphan Would you mind sharing the code you used here? When I tried to add a max-width, it just forced things off-center in a weird way. 

.summary-title-link {
    position: relative;
    top: -200px;
    left: 0%;
    max-width: 60% !important;
    margin: 0 auto !important;
    display: block;
    height: 100%;
    margin: 0px 0px 0px 0px;
    padding-top: 21px;
    padding-right: 21px;
    padding-left: 21px;
    z-index: 1;
    color: #393838;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .28em;
    line-height: 2em;
    font-family: futura-pt;
    background: rgba(255,255,255,.8);
}
.sqs-block-summary-v2 .summary-excerpt {
    position: relative;
    top: -210px;
    max-width: 60%;
    margin: 0 auto;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 1;
    color: #393838;
    text-transform: lowercase;
    font-weight: 400;
    font-size: 16px;
    background: rgba(255,255,255,.8);
}

 

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

If you want to center vertically, use transform: translateY(-50%); with top: 50%;

Just thought, why not use position for summary-content, and remove code of title & excerpt

.summary-content.sqs-gallery-meta-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.8);
}

 

and adjust some things, it will like this

image.thumb.png.071a71a86026455b49ad91c21c72264f.png

 

 

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

Archived

This topic is now archived and is closed to further replies.

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