katescott 130 Share Posted 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? Link to post
0 tuanphan 9,330 Share Posted December 6, 2019 (edited) Set max-width & adjust top for both codes. Edited December 6, 2019 by tuanphan You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 katescott 130 Author Share Posted 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. Link to post
0 tuanphan 9,330 Share Posted 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); } You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 katescott 130 Author Share Posted December 6, 2019 @tuanphan Thanks so much! Do you know if there's a way to center it vertically as well? Link to post
0 tuanphan 9,330 Share Posted December 6, 2019 (edited) 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 1 You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
Question
katescott 130
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?
Link to post
Top Posters For This Question
4
3
Popular Days
Dec 6
7
Top Posters For This Question
katescott 4 posts
tuanphan 3 posts
Popular Days
Dec 6 2019
7 posts
Popular Posts
tuanphan
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-conte
Posted Images
6 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment