Re: trouble with CSS targeting

Solved

How can I effectively target specific elements on my product page using CSS?

viggostarcke
Excursionist
26 1 3

viggostarcke_0-1699014380200.png

As seen in the picture above I have trouble targeting certain elements on my product page with the font im using.
css like:

label{
font-family: '{{name}}' !important;
}

doesnt do the trick even tho 'Quantity' is a label.

 

Also as a bonus question the I need to remove underlining completely (also hover) from my footer as seen below.

viggostarcke_1-1699014531371.png

 


website is: https://kyototango.myshopify.com/products/beijing-lips

 

thanks in advance

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8566 1690 1700

This is an accepted solution.

Please try to add code like this. Make sure you change 'Inter' with your font family name

label {
    font-family: 'Inter' !important;
}

This code is to remove text underlining

.footer-block__brand-info .rte a { text-decoration: unset !important; }

 

- Helpful? Like and Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
8566 1690 1700

This is an accepted solution.

Please try to add code like this. Make sure you change 'Inter' with your font family name

label {
    font-family: 'Inter' !important;
}

This code is to remove text underlining

.footer-block__brand-info .rte a { text-decoration: unset !important; }

 

- Helpful? Like and Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

viggostarcke
Excursionist
26 1 3

thanks:)

viggostarcke
Excursionist
26 1 3

do you know how to change the 'Quantity' label to 'quantity' (non-capital 'Q') and remove underlining from 'More payment options' aswell as changing the beginning letter to non-capital aswell ? thanks in advance! 

Dan-From-Ryviu
Shopify Partner
8566 1690 1700

Hi, you can do that by adding this CSS code 

.product-form__quantity .form__label, 
.shopify-payment-button__more-options { text-transform: lowercase;}
.shopify-payment-button__more-options { text-decoration: unset !important; }

Screenshot_1.jpg

- Helpful? Like and Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.