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 </body>

<style>
@media (max-width: 768px) {
.tabs {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
display: grid;
margin-inline: 1rem;
width: 95%;
justify-content: space-between;
align-items: center;
}
    
}
</style>

Please like and accept the solution if it works for you

Thanks!

[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!

[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 </head> tag and add the following code above </head> 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.