Why isn't my text-transform CSS property working?

Store Design
1

Hi there,

I’m trying to add text-transform: capitalize to the below selector and it DOESNT work. I can change to Lowercase but not to capitalize?

I,ve set the typography in the main editor for titles to NONE and have tried setting it to lowercase. Doesnt help

Can you help please?

#shopify-section-product__main 
.product_section .product_name.title {
    font-size: 30px;
    font-weight: 500;
    text-transform: capitalize;
}
2

@RobMoore007

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

3

Hi and thanks

https://auchterlonies-com.myshopify.com/

paswd: awskob

1 Like
4

@RobMoore007

Which section should I check?

Please provide a screenshot.

5

https://auchterlonies-com.myshopify.com/collections/callaway-cart-golf-bags/products/fairway-c-stand-bag

Screen Shot 2021-05-22 at 09.12.13.png
Screen Shot 2021-05-22 at 09.12.13.png1264×773 63.6 KB

1 Like
6

@RobMoore007

I checked. It is very strange. I can see your above URL product name is in capital letters. Might be this is the problem. Goto admin put your product name in normal, not in full capital letters, and see if text-transform works.

Thanks!

7

@RobMoore007

Please add the following code at the bottom of your assets/styles.css file.

@media (max-width: 767px) {
#shopify-section-product__main .product_section .product_name.title { text-transform: capitalize !Important;}
}

@media (min-width: 768px) {
#shopify-section-product__main .product_section .product_name.title {text-transform: capitalize !Important;}
}

Thanks!

8

Surely the whole point of the CSS text-transform is to do just that without having to go into individual products and change them

Ive tried your CSS co in the last post and still have same issue??