Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change font of drop-down menu in product listing


MarikaS

Question

Hi there,

I started using the Brine template, and in my product listing I have a drop down menu for size and quantity

The size drop down uses a different, ugly font which is not related to the template style. Any idea on how to change this?

Thanks

Marika

Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

You need to use custom CSS. Can you share link to product listing page?

Add to Home > design > Custom CSS .ProductItem-details .variant-option select option { font-family: monospace !important; } .ProductItem-details .variant-option select { font-size: 2

Posted Images

11 answers to this question

Recommended Posts

  • 0
On 2/27/2020 at 7:41 AM, MarikaS said:

Add to Home > design > Custom CSS

.ProductItem-details .variant-option select option {
    font-family: monospace !important;
}
.ProductItem-details .variant-option select {
    font-size: 20px;
}

 

Link to post
  • 0

Hi @tuanphan, 

that custom css didn't seem to work on my site. It isn't live yet but looks like this (attached screen shot).  Any suggestions for the below code?

/* ProductItem-details */
.variant-option select option {
    font-family: roboto !important;
}
.ProductItem-details .variant-option select {
    font-size: 16px;
}

Screen Shot 2020-06-25 at 1.38.27 pm.png

Link to post
  • 0
5 hours ago, runsweatinspire said:

Hi @tuanphan, 

that custom css didn't seem to work on my site. It isn't live yet but looks like this (attached screen shot).  Any suggestions for the below code?

/* ProductItem-details */
.variant-option select option {
    font-family: roboto !important;
}
.ProductItem-details .variant-option select {
    font-size: 16px;
}

 

You can setup password & share url

Link to post
  • 0
12 hours ago, runsweatinspire said:

@tuanphan

Sorry, I don't understand. The password is already setup but the site isn't live as yet. deeksdemosite.squarespace.com

 

#productDetails .product-variants .variant-option select {
    font-family: roboto !important;
}

 

Link to post
  • 0

Hi,

I'm not a coder but I managed to fix my issue by combining snippets I found on the forum. The second snippet is what changed the font on the dropdown. I use the Brine template if that helps.

 

#productDetails .product-variants .variant-option select {
    font-family: Montserrat !important;
}

/* Variant dropdown size */
.ProductItem-details .variant-option select option {
    font-size: 12px;
  font-family: Montserrat;
}

Link to post
  • 0

Hello

I have the same problem.  The Body text in my website is Myriad Pro but the dropdown font looks like Times New Roman. I would like it to be the same as the rest of the website.  I am NOT A CODER so don't understand the fixes above.  Please can someone give me a very clear idiot's guide to how to fix the problem?

Thank you!

Shop.jpg

Link to post
  • 0
21 hours ago, CoWT said:

Hello

I have the same problem.  The Body text in my website is Myriad Pro but the dropdown font looks like Times New Roman. I would like it to be the same as the rest of the website.  I am NOT A CODER so don't understand the fixes above.  Please can someone give me a very clear idiot's guide to how to fix the problem?

Thank you!

If you share link to product in screenshot, we can give code easier

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...