Change Size/Placement of Summary Block Arrows

Hi there!

I'm hoping someone might be willing to help me with some simple custom code to change the size/placement of the arrows on my summary block.

On my website home page, under the third section under where it says "recent blog posts" (with the flower background), the current arrows are essentially invisible and tiny. I would love for them to frame the right and left sides of the carousel and appear bigger -- also maybe in white, or a color that will be more obvious.

Can someone help this poor code-illiterate gal?? Many thanks!!

-Jessi

Hi,

Can you share link to page where you use Summary Block?

I'm so sorry - I thought this was automatically included in my message.

My website is: https://soulflower.love/

It's on the front page if you scroll down to the third block titled "recent blog posts."

Thank you!!

did you mean recent episodes? Its really difficult to spot arraw if its on recent blog, with flower background. 

UPDATE: found it. its on the top right of the last blog. 🙂

perhaps this css might be useful:

<style>
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
width: auto;
}

.sqs-gallery-design-carousel .sqs-gallery-controls .next:before, .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
padding: 10px;
background: #000;
color: #fff;
border-radius: 50%; // only if you need rounded buttnos
}
</style>

Thank you so much for taking the time to reply to me! 🙂

This code works perfectly. Thank you!!