LM_91 Posted June 21, 2022 Posted June 21, 2022 (edited) 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. Below is mobile view and the font size is too big, would be great to have size and price on the same line. Edited June 21, 2022 by LM_91
Beyondspace Posted June 21, 2022 Posted June 21, 2022 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. Below is mobile view and the font size is too big, would be great to have size and price on the same line. Can you share your site with site-wide password so we can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
LM_91 Posted June 22, 2022 Author Posted June 22, 2022 Absolutely, the website is: www.gatewaycollages.com Appreciate the help!
tuanphan Posted June 22, 2022 Posted June 22, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
LM_91 Posted June 22, 2022 Author Posted June 22, 2022 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.
tuanphan Posted June 22, 2022 Posted June 22, 2022 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. 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
LM_91 Posted June 22, 2022 Author Posted June 22, 2022 Unfortunately putting this code to Settings > Advanced > Code Injection > Header still doesn't change the font size for mobile.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment