A user implemented custom collection tabs in their Dawn theme Shopify store that display well on desktop but poorly on mobile, with tabs extending beyond the viewport.
Problem: The mobile layout shows tabs in a single horizontal line that requires scrolling, rather than wrapping to multiple rows as desired.
Solution Provided: DaisyVo offered CSS code to be added to the theme.liquid file above the </head> tag. The code uses media queries to adjust tab width and padding for screens under 768px, allowing tabs to wrap properly on mobile devices.
Result: The CSS solution successfully resolved the mobile display issue.
Follow-up Request: The user now wants to add a “View More” button to each collection tab. A respondent indicated this would require Liquid code modifications to link each button to its respective collection.
Status: Initial mobile layout issue resolved; “View More” button feature remains open for implementation.
Hello Everyone!
I have added collection tabs through coding. I want the collection tab to look nicer in mobile mode. It looks great in desktop mode but not good in mobile mode. 3 or 4 tab menus on the top line and the rest of the menus below can be kept beautifully in mobile mode?
Store: https://delicious-fruits-vegetables.myshopify.com/
Password: Admin
Desktop Mode looks Good
Mobile Mode Not Good
Can this be done in mobile mode?
Hi @dreamtechzone_5
Please put this in theme.liquid before body closing tag
Please like and accept the solution if it works for you
Thanks!
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ
Here is the code for Step 3:
{% style %}
@media screen and (max-width: 768px){
div.shopify-section > .tabs {
width: 90% !important;
}
div.shopify-section > .tabs button {
padding-inline: 6px !important;
}
}
{% endstyle %}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
Wow Great. It worked. Thank you very much. Another thing, is it possible to add a “View More” button to each collection tab?
Hi @dreamtechzone_5
You have to adjust that using liquid code and adding a link of current tab collection there
Thanks!
