Collection Tab ( Dawn Theme )

[dreamtechzone_5]

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?

[pawankumar]

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!

[DaisyVo]

Hi @dreamtechzone_5

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.

[dreamtechzone_5]

Wow Great. It worked. Thank you very much. Another thing, is it possible to add a “View More” button to each collection tab?

[pawankumar]

Hi @dreamtechzone_5
You have to adjust that using liquid code and adding a link of current tab collection there
Thanks!