Naomi-lifelab Posted April 5, 2022 Posted April 5, 2022 Site URL: https://lifelab.world/landing-page-sample-1 Hello Squarespace experts, May I please ask for help on this? I am currently working on making the summary block arrows move from upper left to the middle on each side. (Please see attached photo) I have been trying using codes from the forum and trying in Inspect but I cannot seem to make them work in CSS ins Squarespace. I have this code but whenever I try to tweak it the arrows disappear. I think it is because of the full width page. Please help me fill all these win which I can see the arrows on each sides #settings-layout-summary .summary-carousel-pager .previous { position: absolute !important; left: !important; right: inherit !important; top: !important; } #settings-layout-summary .summary-carousel-pager .next { position: absolute !important; left: inherit !important; right: !important; top: !important; } #settings-layout-summary .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { display:inline-block !important; float: right; position: relative; top: auto; left: ; right: ; bottom: auto; margin: 0 0 0; padding: 0; background-color: transparent; color: #fff !important; font-size: px; line-height: px; text-align: center; cursor: pointer; } Thank you in advance!
Solution tuanphan Posted April 6, 2022 Solution Posted April 6, 2022 Add this CSS /* Landing page summary arrows */ div#block-yui_3_17_2_1_1649142326010_3915 { .sqs-gallery-controls .next, .sqs-gallery-controls .previous { position: absolute !important; top: 50% !important; transform: translateY(-50%); font-size: 30px !important; right: 50px !important; } .sqs-gallery-controls .previous { right: unset !important; left: 50px !important; } .sqs-gallery-controls .next:before { font-size: 30px; background-color: white; } .sqs-gallery-controls .previous:before { font-size: 30px; background-color: red !Important; }} Naomi-lifelab 1 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!)
Naomi-lifelab Posted April 7, 2022 Author Posted April 7, 2022 On 4/6/2022 at 5:21 PM, tuanphan said: Add this CSS /* Landing page summary arrows */ div#block-yui_3_17_2_1_1649142326010_3915 { .sqs-gallery-controls .next, .sqs-gallery-controls .previous { position: absolute !important; top: 50% !important; transform: translateY(-50%); font-size: 30px !important; right: 50px !important; } .sqs-gallery-controls .previous { right: unset !important; left: 50px !important; } .sqs-gallery-controls .next:before { font-size: 30px; background-color: white; } .sqs-gallery-controls .previous:before { font-size: 30px; background-color: red !Important; }} Thank you @tuanphanyou have always been helpful! 🙏
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment