Issue: After adding custom CSS to center collection list titles on the homepage, one collection link in the mobile dropdown menu became centered while others stayed left-aligned.
Attempts: Store URL and password were shared. A suggested @media rule to left-align .list-menu__item was first provided with a typo, then corrected, but didn’t fix the issue. The misalignment was reproducible on some devices (Samsung/Chrome and the theme editor’s mobile view) but not on others.
Access: Collaborator access was granted via a 4-digit code so the helper could inspect the theme directly.
Fix: The root cause was a conflicting rule at the bottom of base.css affecting the mobile menu item alignment. An overriding rule was added via Theme settings > Custom CSS to force left alignment, resolving the inconsistency.
Outcome: The menu now displays correctly on mobile. Screenshots were shared to show the error and final changes. Status: Resolved; no outstanding questions beyond the explanation of the fix.
Summarized with AI on December 18.
AI used: gpt-5.
After playing around with custom css, base.css and theme.liquid to center align the header text and link text for single item collection lists displayed on our homepage, I got it to work on both mobile and desktop view. It was a true pain with copying css code from multiple threads.
None of this code targets one collection specifically (except the custom css, but it seems the same for all three collection listings I display), but strangely enough one of the menu items (that display collections) in my mobile drop down now is center aligned. I did not add any code regarding menu items specifically that I am aware of.
I tried everything to move this menu item left, but nothing works. I am desperate for help so I can finally go live, this is the final bug on our Shopify website.
Hi @Dan-From-Ryviu when I add this custom code on the header section where the menu is in mobile view, it gives an error with the css. No further information, but I can’t save. Should I add the code somewhere else?
My mother doesn’t see it on her mobile phone, it is perfectly aligned there. On my phone it is also perfectly aligned. Except for my girlfriends phone (both samsung and chrome mobile browsers) and in mobile view of the theme editor.
Thank you for your time, I granted the request. I will buy a coffee for you definitely if you get this to work. Please be aware there will be some code I copy and pasted in base.css and theme liquid file. It will be halfway or at the end. The code’s purpose is to center the header text and link text of the collection listings (1 collection each) on the homepage.
Hi Dan, all looks great. Thank you so much and enjoy your coffee. If it’s not too much trouble, what was the issue/what did you update? I would like to understand where I went wrong.
