Styling carousel gallery arrows in Brine

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! 

Can you share link to your site?

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!

You can setup password & share url

2 minutes ago, tuanphan said:

You can setup password & share url

Here, I actually just pushed it live for now. Not like I'm getting thousands of views anyway haha:

https://sabrina-scott.com/

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

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

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

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 😞

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

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.

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

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

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!

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. ✌️

On 3/19/2020 at 6:26 PM, tuanphan said:

Question 4

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

Hey, could you help with how this could work for the image title as well? Same as the arrows, where there's no box around the title when it shows on hover. Thanks!

3 hours ago, Parizad said:

 

Can you share link to page where you use gallery?