Modular Theme Collection & Product page Modification

[pcbrand]

Hi there,

Does anyone know how to reduce the width of the collections list on the Modular theme on the homepage? I know right now they are on 100% and that's way too wide.

I would like to make it the width of the featured collection above it via 2 or 4 squares (two squares on top and two squares on the bottom). I haven't decided if I want to do 2 or 4 squares but the option for both would be great. I also don't want them to be so tall/high, just standard squares would be great.

I can't figure it out in the code how to fix that. I was trying but the container is on float left and my CSS skills are not as great as they should be.

Is there also a way to adjust the whole product page so they are not quite so wide? A little more narrow and centered would be great. Maybe like 60-70% vs 100% width. It seems so left aligned to me? So the product page looks more like this size/width: https://themes.shopify.com/themes/district/styles/district/preview

Any help would be appreciated.

Thanks,

Adam

[JustinTharpe · Accepted solution]

Hey @pcbrand, I've looked into your store.

And you can try the following code to get it centered on desktop. And full width on mobile devices.

Please let me know if you found this helpful!

.product {
    width: 80%;
    margin: 50px auto;
}

@media (max-width: 768px) {
    .product {
        width: 100%;
    }
}

[KetanKumar]

@pcbrand 

can you please send your store url

[pcbrand]

Hi there,

Sure it's:https://pcbrand.myshopify.com/

view password is: sticker2022

Thanks,

Adam

[JustinTharpe · Accepted solution]

Hey @pcbrand, I've looked into your store.

And you can try the following code to get it centered on desktop. And full width on mobile devices.

Please let me know if you found this helpful!

.product {
    width: 80%;
    margin: 50px auto;
}

@media (max-width: 768px) {
    .product {
        width: 100%;
    }
}

[pcbrand]

Thank you SO much! That worked PERFECTLY for the product page. Any thoughts about the collection list on the homepage being 100% width? It's way too big. Thanks! 🙂

[JustinTharpe · Accepted solution]

@pcbrand, please mark the answer as "accepted solution" for future readers.

And yes, for the collection list. You can try the following:

.collection-list__wrapper {
    width: 80%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .collection-list__wrapper {
        width: 100%;
    }
}

[pcbrand]

Thank you! That did work perfectly. I had to change it to 66% to match the width of the collection above it. I also added height:400px (they are way too tall), but it cuts off text and the button. Is there a way to make them less tall but retain the text/image inside of them.

Also - do you have any thoughts on the header slider image being more "crisp?" I feel like shopify compresses the quality down regardless of jpeg, png. I tried to mess with sizing but its somewhat clunky. Product images come out fine but the slider doesn't. 

Thank you!

Adam

[pcbrand]

Also the collection image is SUPER zoomed in for some reason. Not sure why!