Naomi-lifelab Posted November 10, 2022 Share Posted November 10, 2022 Hello experts! I am humbly seeking for you expertise to fix this error. Originally I made a landing page, and I wanted the gallery arrow sliders to be bigger. So I added this code specifically for this landing page link: https://lifelab.world/workshop-location-buchen /* Landing page spaces photo preview summary arrows */ div#block-yui_3_17_2_1_1648549152222_22108 { .sqs-gallery-controls .next { position: absolute !important; top: 35% !important; transform: translateY(100%); font-size: 30px !important; right: -100px !important; overflow: visible; } .sqs-gallery-controls .previous { position: absolute !important; top: 35% !important; transform: translateY(100%); font-size: 30px !important; left: -100px !important; overflow: visible; } .summary-carousel-pager .sqs-gallery-controls { overflow: visible; } } .sqs-gallery-controls .previous { right: unset !important; left: 20px !important; color: white; background-color: rgba(255, 255, 255,.5) } .sqs-gallery-controls .next { right: 10px !important; color: #fff; background-color: rgba(255, 255, 255,.5) } .sqs-gallery-controls .next:before { font-size: 100px; color: #fff; } .sqs-gallery-controls .previous:before { font-size: 100px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 50px; width: 50px; height: 5px; line-height: 5px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02C"; text-align: center; display: inline-block; vertical-align: middle; color: #fff!important; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 50px; width: 50px; height: 5px; line-height: 5px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02D"; text-align: center; display: inline-block; vertical-align: middle; } /* Landing page setiing summary arrows */ div#block-yui_3_17_2_1_1649142326010_3915 { .sqs-gallery-controls .next { position: absolute !important; top: 45%!important; transform: translateY(-50%); font-size: 30px !important; right: 100px !important; color: white; } .sqs-gallery-controls .previous { position: absolute !important; top: 45%!important; transform: translateY(-50%); font-size: 30px !important; right: 100px !important; color: white; } //left arrow// .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02C"; text-align: center; display: inline-block; vertical-align: middle; color: #fff; } //right arrow// .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02D"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-controls .previous { right: unset !important; left: 20px !important; color:#fff; } .sqs-gallery-controls .next { right: 50px !important; color: #fff; } .sqs-gallery-controls .next:before { font-size: 80px; color:#fff; } .sqs-gallery-controls .previous:before { font-size: 80px; } } The problem I am currently facing it is being applied all throughout the website. This is what it looks like on a normal page (not landing page) What can I do to have the arrows sizing codes be applied only on the landing page? I am not an expert and I am just learning along the way, I do appreciate anyone's help in advance for this. Link to comment
Solution Ziggy Posted November 10, 2022 Solution Share Posted November 10, 2022 It looks like you have a closing } too early, try this as a replacement for all that code: /* Landing page spaces photo preview summary arrows */ div#block-yui_3_17_2_1_1648549152222_22108 { .sqs-gallery-controls .next { position: absolute !important; top: 35% !important; transform: translateY(100%); font-size: 30px !important; right: -100px !important; overflow: visible; } .sqs-gallery-controls .previous { position: absolute !important; top: 35% !important; transform: translateY(100%); font-size: 30px !important; left: -100px !important; overflow: visible; } .summary-carousel-pager .sqs-gallery-controls { overflow: visible; } .sqs-gallery-controls .previous { right: unset !important; left: 20px !important; color: white; background-color: rgba(255, 255, 255,.5) } .sqs-gallery-controls .next { right: 10px !important; color: #fff; background-color: rgba(255, 255, 255,.5) } .sqs-gallery-controls .next:before { font-size: 100px; color: #fff; } .sqs-gallery-controls .previous:before { font-size: 100px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 50px; width: 50px; height: 5px; line-height: 5px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02C"; text-align: center; display: inline-block; vertical-align: middle; color: #fff!important; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 50px; width: 50px; height: 5px; line-height: 5px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02D"; text-align: center; display: inline-block; vertical-align: middle; } } /* Landing page setiing summary arrows */ div#block-yui_3_17_2_1_1649142326010_3915 { .sqs-gallery-controls .next { position: absolute !important; top: 45%!important; transform: translateY(-50%); font-size: 30px !important; right: 100px !important; color: white; } .sqs-gallery-controls .previous { position: absolute !important; top: 45%!important; transform: translateY(-50%); font-size: 30px !important; right: 100px !important; color: white; } //left arrow// .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02C"; text-align: center; display: inline-block; vertical-align: middle; color: #fff; } //right arrow// .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02D"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-controls .previous { right: unset !important; left: 20px !important; color:#fff; } .sqs-gallery-controls .next { right: 50px !important; color: #fff; } .sqs-gallery-controls .next:before { font-size: 80px; color:#fff; } .sqs-gallery-controls .previous:before { font-size: 80px; } } Let me know if that worked. Naomi-lifelab 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Naomi-lifelab Posted November 10, 2022 Author Share Posted November 10, 2022 22 minutes ago, Ziggy said: It looks like you have a closing } too early, try this as a replacement for all that code: /* Landing page spaces photo preview summary arrows */ div#block-yui_3_17_2_1_1648549152222_22108 { .sqs-gallery-controls .next { position: absolute !important; top: 35% !important; transform: translateY(100%); font-size: 30px !important; right: -100px !important; overflow: visible; } .sqs-gallery-controls .previous { position: absolute !important; top: 35% !important; transform: translateY(100%); font-size: 30px !important; left: -100px !important; overflow: visible; } .summary-carousel-pager .sqs-gallery-controls { overflow: visible; } .sqs-gallery-controls .previous { right: unset !important; left: 20px !important; color: white; background-color: rgba(255, 255, 255,.5) } .sqs-gallery-controls .next { right: 10px !important; color: #fff; background-color: rgba(255, 255, 255,.5) } .sqs-gallery-controls .next:before { font-size: 100px; color: #fff; } .sqs-gallery-controls .previous:before { font-size: 100px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 50px; width: 50px; height: 5px; line-height: 5px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02C"; text-align: center; display: inline-block; vertical-align: middle; color: #fff!important; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 50px; width: 50px; height: 5px; line-height: 5px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02D"; text-align: center; display: inline-block; vertical-align: middle; } } /* Landing page setiing summary arrows */ div#block-yui_3_17_2_1_1649142326010_3915 { .sqs-gallery-controls .next { position: absolute !important; top: 45%!important; transform: translateY(-50%); font-size: 30px !important; right: 100px !important; color: white; } .sqs-gallery-controls .previous { position: absolute !important; top: 45%!important; transform: translateY(-50%); font-size: 30px !important; right: 100px !important; color: white; } //left arrow// .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02C"; text-align: center; display: inline-block; vertical-align: middle; color: #fff; } //right arrow// .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02D"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-controls .previous { right: unset !important; left: 20px !important; color:#fff; } .sqs-gallery-controls .next { right: 50px !important; color: #fff; } .sqs-gallery-controls .next:before { font-size: 80px; color:#fff; } .sqs-gallery-controls .previous:before { font-size: 80px; } } Let me know if that worked. It worked! Thank you so much @Ziggy! Such a life saver! 🙏 Link to comment
Ziggy Posted November 10, 2022 Share Posted November 10, 2022 No problem, glad I spotted that, can be tricky to find coding "errors" (not really an error , just a misplaced bracket). Can you mark my post as the solution to your question and give it a thumbs up? Thanks! Naomi-lifelab 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment