LM_91 Posted June 21, 2022 Share 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 Link to comment
Beyondspace Posted June 21, 2022 Share 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 (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
LM_91 Posted June 22, 2022 Author Share Posted June 22, 2022 Absolutely, the website is: www.gatewaycollages.com Appreciate the help! Link to comment
tuanphan Posted June 22, 2022 Share 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 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
LM_91 Posted June 22, 2022 Author Share 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. Link to comment
tuanphan Posted June 22, 2022 Share 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 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
LM_91 Posted June 22, 2022 Author Share Posted June 22, 2022 Unfortunately putting this code to Settings > Advanced > Code Injection > Header still doesn't change the font size for mobile. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment