A user seeks CSS code to adjust image and font sizes in their Shopify store’s menu items (theme: Xtra), compatible with both desktop and mobile. An attached screenshot shows the specific menu elements requiring modification.
Three solutions were provided:
Solution 1: Add CSS within <style> tags above the </body> tag in theme.liquid, targeting font and image dimensions with specific pixel values. Includes a result screenshot.
Solution 2: Insert CSS code into theme.css or base.css file, using selectors li.ff-primary a (font-size: 17px) and span.img.category img (width: 35px).
Solution 3: Add CSS via Online Store → Settings → Custom CSS, with larger values (font-size: 35px, image width: 100px).
The original poster acknowledged the third solution. All approaches use !important flags and target the same CSS selectors with varying size specifications. The discussion remains open regarding which solution was implemented or most effective.
Hi everyone,
Website is: theoutdoorarmory.com
Theme is: Xtra
Can you please send me a CSS code - that works for both desktop and mobile; and that I can play around with - to change the sizes of the images and the font size of the menu items as encircled below:
Thanks in advance!
Outdoor Armory
Hey @outdoorarmory
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello, @outdoorarmory
li.ff-primary a {
font-size: 17px !important;
}
span.img.category img {
width: 35px !important;
}
Thanks!
Go to your online store → settings → custom css and paste this code there
li.ff-primary a {
font-size: 35px !important;
}
span.img.category img {
width: 100px !important;
}
Hi @Asad-Mahmood , thanks!