Jump to content

Summary Block Navigation Arrows Fix on Brine SS7.0

Go to solution Solved by tuanphan,

Recommended Posts

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;
}


690051369_Summaryblockpointers.thumb.png.815cc1975b566f16e59d7bd811d1bf76.png

 

Thank you in advance!

Link to comment
  • Solution

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;
}}

 

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
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! 🙏

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.