Change the styling of 'Read more' text in summary block

Hey!

I'm struggling to change the font styling of the read more text in a summary block.

I have tried to use this code, but no luck:
 

a.summary-read-more-link {
   font-weight: 500 !important;
    font-size: 1rem;
  	text-transform: none;
  font-style: normal !important;
}

It is for the 'Stories we've told so far' section on the home page, if you want to take a look.

https://www.blackandwhiteweb.design/

Password: testing

Thanks in advance!

Hey @Lesum, thank you so much that worked!

I had a couple more questions if you didn't mind for this section of my website:
 

1. I'd like to change the navigation arrows so they are similar styling (icon thickness and size) to the arrows used in my faq's accordian further down on the page. How would I go about this? I've already got some custom css to get them positioned where they are:
    

   .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
   width: auto;
   }
   
   .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {   float: none;   width: 105%;   position: absolute;   bottom: 50%;   left: 50%;   -webkit-transform: translate(-50%,-50%);       -ms-transform: translate(-50%,-50%);           transform: translate(-50%,-50%);   -webkit-box-pack: justify;       -ms-flex-pack: justify;           justify-content: space-between;   z-index: 9; }

   
    
2. What's the right css to customize the padding between the title, description and read more text?

Many thanks again!

@DillonBradley 1. Customizing the navigation arrow icons, unlike the arrows used in the FAQ accordion, presents some limitations. The styling of navigation arrow icons depends on the font styling of the accompanying text. In contrast, the accordion arrow icon is essentially a styled block that is transformed into an arrow shape using CSS code.

That said, we do have the option to hide the navigation arrow icon entirely and replace it with a custom icon that can be customized using CSS code.

2. To add padding on title:

.sqs-block-summary-v2 .summary-block-setting-text-size-large .summary-title {
	padding-bottom: 0.5rem !important;
}

To add padding on description:

.sqs-block-summary-v2 .summary-excerpt {
   padding-bottom: 0.5rem !important;
}

To add padding on read more text:

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
	padding-bottom: 0.5rem !important;
}

@Lesum Thank you for that info, thats really useful and the padding code worked perfectly!

Regarding the summary block arrows, how would I go about replacing them with a custom icon that can be customized using CSS code?

Many thanks!

@DillonBradley If you mean these arrows

You can use this CSS code, replace Pixabay with your custom icon url

/* Summary Arrows in Left-Right side */
span.summary-carousel-pager-next.next {
    background: url(https://cdn.pixabay.com/photo/2023/09/10/00/49/lovebird-8244066_1280.jpg) no-repeat center center !important;
    background-size: contain !important;
}
span.summary-carousel-pager-prev {
        background: url(https://cdn.pixabay.com/photo/2023/09/04/10/16/girl-8232444_1280.jpg) no-repeat center center !important;
        background-size: contain !important;
}

.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before, .sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    opacity: 0;
}

Thank you @tuanphan!!