Jump to content

How to change the drop down menu font on products page for mobile

Recommended Posts

Hi there, 

Cant seem to find a way to reduce the font size in the drop down menu on my products page for mobile. On the desktop the font size looks great but when I switch to mobile view the font size is very big. Is there a way I can reduce the size just on the mobile version? 

Thanks for the help!

 

Below is the desktop view, which looks fine, everything fits.image.thumb.png.c8e6248f0a42566d3719fea20bb58866.png

Below is mobile view and the font size is too big, would be great to have size and price on the same line.

Mobile view.jpg

 

Edited by LM_91
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

1 hour ago, LM_91 said:

Hi there, 

Cant seem to find a way to reduce the font size in the drop down menu on my products page for mobile. On the desktop the font size looks great but when I switch to mobile view the font size is very big. Is there a way I can reduce the size just on the mobile version? 

Thanks for the help!

 

Below is the desktop view, which looks fine, everything fits.image.thumb.png.c8e6248f0a42566d3719fea20bb58866.png

Below is mobile view and the font size is too big, would be great to have size and price on the same line.

Mobile view.jpg

 

Can you share your site with site-wide password so we can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 hours ago, LM_91 said:

Absolutely, the website is: www.gatewaycollages.com

Appreciate the help!

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
div.variant-option option {
    font-size: 12px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi Tuanphan, 

Thanks for your help - I tried plugging in this code into the Design > Custom CSS but still the font size hasn't changed on the mobile version. I am changing the font sizes (12px and lower) and then refreshing the page on my phone and nothing has changed...not sure why that is. Below is a screenshot of the code with a font size of 5px and then a screenshot of how the font looks on the mobile. 

 

image.png.8a2d7ff7368cc1b70182237f8828c888.png

 

image.thumb.jpeg.a73b21e12ab38addcee414324f4fb323.jpeg

 

 

 

Link to comment
21 minutes ago, LM_91 said:

Hi Tuanphan, 

Thanks for your help - I tried plugging in this code into the Design > Custom CSS but still the font size hasn't changed on the mobile version. I am changing the font sizes (12px and lower) and then refreshing the page on my phone and nothing has changed...not sure why that is. Below is a screenshot of the code with a font size of 5px and then a screenshot of how the font looks on the mobile. 

 

image.png.8a2d7ff7368cc1b70182237f8828c888.png

 

image.thumb.jpeg.a73b21e12ab38addcee414324f4fb323.jpeg

 

 

 

Try adding new code to Settings > Advanced > Code Injection > Header

<style>
  @media screen and (max-width:767px) {
div.variant-option option {
    font-size: 12px !important;
}
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.