katescott Posted December 6, 2019 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? 👩💻 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
tuanphan Posted December 6, 2019 Share Posted December 6, 2019 Set max-width & adjust top for both codes. 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
katescott Posted December 6, 2019 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. 👩💻 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
tuanphan Posted December 6, 2019 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); } 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
katescott Posted December 6, 2019 Author Share Posted December 6, 2019 @tuanphan Thanks so much! Do you know if there's a way to center it vertically as well? 👩💻 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
tuanphan Posted December 6, 2019 Share Posted 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 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
katescott Posted December 6, 2019 Author Share Posted December 6, 2019 @tuanphan Thank you! 👩💻 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.