How can I edit revolution slider spacing and font size?

Shopify Discussion
1

Hey everyone! I’m using a custom theme and I’m hoping someone can help me edit my revolution slider!

I have 2 problems :neutral_face:

  1. My revolution slider is creating huge spaces between the 3 text boxes and I don’t know how to reduce the spacing. My home page is www.kombuchatribe.com. Can someone tell me how to reduce the spacing between text boxes? Please!

  2. The font sizes between the desktop and mobile are wonky. When they’re sized appropriately for desktop they’re HUGE on mobile. Can someone tell me how to change font sizes appropriately for desktop and mobile? Thanks.

I’ve also searched through theme settings and kind find out sections that allow me to customize these things. PLEASE HELP! Thank you!

Thanks,

Jon

2

Hi @KombuchaTribe , could you please provide some screenshots that explain more your questions here? It will be easy for us to help you check it quickly. Thank you so much

3

HI @KombuchaTribe ,

  1. Add this code to your theme.css.liquid file
.slider-revolution .tp-caption1-wd-1 { line-height: 1!important; }
  1. I guess you can set font-side from customize of slider setting
4

Hello @KombuchaTribe ,

To resolve this issue, you need to add the below-provided code to your theme.liquid file.

  • Go to your Shopify admin > Sales channel > Online store
  • Select your theme > Click on action > edit code
  • Open theme.liquid file
  • Search for the closing body tag and paste the below-given code just before the closing body tag
  • Now, save the changes
/* For adjust font size and alignment in mobile view */ @media screen and (max-width:450px){ .tp-banner-container ul li p { font-size: 12px !important; max-width: 184px !important; text-align: center; } } /* For adjusting font size and alignment in desktop view */ .tp-banner-container ul li p { font-size: 18px !important; text-align: center; }

Hope it helps, let us know if you need any help.

Regards,

CedCommerce