Shopify themes, liquid, logos, and UX
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
Now in Mobile mode
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;
}
}
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.
@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;
}
}
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.
Please help me Sir!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025