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

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

Question

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?

Share this post


Link to post

6 answers to this question

Recommended Posts

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

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

 

 

Edited by tuanphan

You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...