Collection Tab Width Issues ( Shopify Dawn Theme )

Collection Tab Width Issues ( Shopify Dawn Theme )

dreamtechzone_5
Shopify Partner
499 1 89

Hello Everyone!

 

I have added the collection tab through coding. Can the width of the collection tab section be kept the same as all other sections in mobile and desktop mode? Please help me. Thank you. 

 

Store: https://dream-candle-lights.myshopify.com/

Password: Admin

 

Now in desktop mode

 

DREAM-CANDLE-LIGHTS-ONLINE-SHOP-02-04-2025_09_15_PM.png

 

Now in Mobile mode

474039828_1826156664593547_8068908336394632886_n.jpg

Replies 5 (5)

CodingFifty
Shopify Partner
613 97 116

Hi @dreamtechzone_5,


Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

 

@media (min-width: 990px){
div#shopify-section-template--23811244818748__collection_tabs_MWPaPE div#tabs-499142885692 {
    padding: 0px !important;
    margin: 0px !important;
}
div#shopify-section-template--23811244818748__collection_tabs_MWPaPE li.grid__item.scroll-trigger.animate--slide-in.slick-slide.slick-current.slick-active {
    width: 282px !important;
}

div#shopify-section-template--23811244818748__collection_tabs_MWPaPE .slick-track {
    opacity: 1;
    width: 100% !important;
    transform: translate3d(0px, 0px, 0px);
    margin: 0px !important;
}
}

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
dreamtechzone_5
Shopify Partner
499 1 89

I have pasted your code but it doesn't look good in desktop and mobile mode. When I click on other collections they look the same as before.

CodingFifty
Shopify Partner
613 97 116

 

@media (min-width: 990px){
div#shopify-section-template--23811244818748__collection_tabs_MWPaPE div#tabs-499142885692 {
    padding: 0px !important;
    margin: 0px !important;
}
div#shopify-section-template--23811244818748__collection_tabs_MWPaPE li.grid__item.scroll-trigger.animate--slide-in.slick-slide.slick-current.slick-active {
    width: 275px !important;
}

div#shopify-section-template--23811244818748__collection_tabs_MWPaPE .slick-track {
    opacity: 1;
    width: 100% !important;
    transform: translate3d(0px, 0px, 0px);
    margin: 0px !important;
}
}

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
dreamtechzone_5
Shopify Partner
499 1 89

Only the DIFFUSERS collection tab worked in desktop mode. It does not work in mobile mode. Also, Other collection tabs do not work in desktop and mobile mode.

dreamtechzone_5
Shopify Partner
499 1 89

Please help me Sir!