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

katescott · December 6, 2019

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:

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

And this is what I have right now:

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?

tuanphan · December 6, 2019

Set max-width & adjust top for both codes.

Edited December 6, 2019 by tuanphan

katescott · December 6, 2019

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

tuanphan · December 6, 2019

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);
}

katescott · December 6, 2019

@tuanphan Thanks so much! Do you know if there's a way to center it vertically as well?

tuanphan · December 6, 2019

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

Edited December 6, 2019 by tuanphan

katescott · December 6, 2019

@tuanphan Thank you!

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

Question

katescott 130

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

tuanphan

Posted Images

6 answers to this question

Recommended Posts

tuanphan 9,330

Link to post

katescott 130

Link to post

tuanphan 9,330

Link to post

katescott 130

Link to post

tuanphan 9,330

Link to post

katescott 130

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources