Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
SabrinaScott

Styling carousel gallery arrows in Brine

Question

I'm looking to adjust the style of the arrows on the carousel gallery block in the Brine template.

Right now they are a transparent square with grey arrow.

I'd ideally like:

1. No arrows and have the gallery scrollable by scrolling finger down on mouse (as you would to scroll down a page) but in this case it would be across the carousel (example: https://www.the7thmember.xyz/)

2. If not possible (without paying for a plugin), remove the transparent square and just have white/black arrows.

(I'd also like to ask if it's possible to add padding within the carousel block between images?)

Thank you in advance! 

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 0
On 2/25/2020 at 8:56 AM, tuanphan said:

Can you share link to your site?

Hey, sorry for the delayed response. I didn't see the notification!

The site isn't live, it's just a preview template I'm working on. Here's a screenshot attached. 

Thanks in advance!

Screenshot 2020-03-19 at 12.13.46.png

Share this post


Link to post
  • 0
17 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

Question 2.


.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background-color: transparent;
}

Question 3.


.sqs-gallery-design-strip .sqs-wrapper img {
    border-right: 5px solid #fff;
}

 

Wow thank you!!!

Quick q in terms of the arrows now, any way to stop the opacity bground arrow hover state? Just to make them same as on hover as they are not on hover.

And one more thing I just noticed after making it live and checking on my phone, this site responds so badly in mobile... the gallery is SO SMALL. Any way around this?

Thanks again x

Share this post


Link to post
  • 0

Question 4

.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background-color: transparent !important;
}

Question 5.

Edit code in Question 3 to

@media screen and (min-width:901px) {
.sqs-gallery-design-strip .sqs-wrapper img {
    border-right: 5px solid #fff;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
3 minutes ago, tuanphan said:

Question 4


.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background-color: transparent !important;
}

Question 5.

Edit code in Question 3 to


@media screen and (min-width:901px) {
.sqs-gallery-design-strip .sqs-wrapper img {
    border-right: 5px solid #fff;
}
}

 

That works great for making bigger in desktop but doesn't seem to adjust in mobile site 😞

Share this post


Link to post
  • 0

And one more thing I just noticed after making it live and checking on my phone, this site responds so badly in mobile... the gallery is SO SMALL. Any way around this?

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage main.Main.Main--page {
    height: calc(100vh - 59px);
}
.homepage section.Main-content {
    height: 100%;
}
.sqs-gallery-design-strip-slide {
    float: none !important;
    width: 100% !important;
    height: auto !important;
}
.sqs-gallery-design-strip .sqs-wrapper {
    width: 100% !important;
    height: auto !important;
}
.sqs-block .sqs-intrinsic {
    padding-bottom: 700% !important;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
3 minutes ago, SabrinaScott said:

That works great for making bigger in desktop but doesn't seem to adjust in mobile site 😞

The easiest way is add 2 blocks (slide - stacked) for desktop/mobile. Then I can give code to hide 1 on desktop, hide 1 on mobile.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
3 minutes ago, tuanphan said:

The easiest way is add 2 blocks (slide - stacked) for desktop/mobile. Then I can give code to hide 1 on desktop, hide 1 on mobile.

There we go, I've added another block as stacked

Share this post


Link to post
  • 0
20 minutes ago, SabrinaScott said:

There we go, I've added another block as stacked

Add to Home > Design > Custom CSS

/* desktop */
@media screen and (min-width:641px) {
/* hide stacked */
div#block-yui_3_17_2_1_1584620461456_6386 {
    display: none;
}
}
/* mobile */
@media screen and (max-width:640px) {
/* hide slide */
div#block-yui_3_17_2_1_1582572417466_3722 {
    display: none;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
16 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


/* desktop */
@media screen and (min-width:641px) {
/* hide stacked */
div#block-yui_3_17_2_1_1584620461456_6386 {
    display: none;
}
}
/* mobile */
@media screen and (max-width:640px) {
/* hide slide */
div#block-yui_3_17_2_1_1582572417466_3722 {
    display: none;
}
}

 

Amazing, thank you so so much!

One last q I promise - is it possible to have the arrows outside of the gallery, rather than inside on the images? 

If not, don't worry, just a small thing. 

Thanks again!

Share this post


Link to post
  • 0
2 minutes ago, SabrinaScott said:

Amazing, thank you so so much!

One last q I promise - is it possible to have the arrows outside of the gallery, rather than inside on the images? 

If not, don't worry, just a small thing. 

Thanks again!

It needs adjusting some elements, which takes a bit of time. If that is not really necessary for you, I will ignore it. ✌️


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...