Letter spacing in 'Sort By' using Berlin theme

RobCupper · ‎10-19-2023

The letter spacing in the Sort By functionality of my Berlin theme is too close together causing them to overlap. I can't see an option to increase letter spacing, or decrease font size so it fits neatly on all devices. Is anyone able to suggest a fix? Thanks

RobCupper · ‎10-19-2023

I ended up fixing it myself with the following code:

.select__sort_by {
padding-left: 8rem;
}

you can amend '8rem' number as needed for more or less spacing

View solution in original post

websensepro · ‎10-19-2023

Please Share Website Url

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

RobCupper · ‎10-19-2023

Here is the preview URL: https://7ogt05bkl5agnj1u-8636456.shopifypreview.com

Thanks!

Small_Task_Help · ‎10-19-2023

Hi,

Add Custom CSS at style css file

.sort-by-dropdown {
    letter-spacing: 2px; /* Adjust the letter spacing as needed */
}

To Get Shopify Experts Help, Click Here or E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Expert India
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad

Made4uo-Ribe · ‎10-19-2023

Hi @RobCupper

We would like to conduct a visual inspection of your store to understand what has happened. To your sort, you can also share the Preview. Just click this button below then copy and paste. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

RobCupper · ‎10-19-2023

https://7ogt05bkl5agnj1u-8636456.shopifypreview.com

thank you!

RobCupper · ‎10-19-2023

I ended up fixing it myself with the following code:

.select__sort_by {
padding-left: 8rem;
}

you can amend '8rem' number as needed for more or less spacing

Letter spacing in 'Sort By' using Berlin theme

Letter spacing in 'Sort By' using Berlin theme

Community Blog Articles