Need help to show two collection images per row mobile on Debut and increase gap below images

New Member
2 0 1

Hello,

 

As my subject states, I have a hard time figuring out how to display two collection images per row on the collection page, on mobile, with Debut theme.
I have done some troubleshooting last night, but all the solutions I found didn't seem to work for me.

My website is https://ubehovlet.dk/collections

 

Another thing; how do I increase the gap between the footer and the collection row on desktop/tablet, because I have moved the collection-title below the image with .collection-grid-item__title{bottom: 0%; top: 102%;}, but now it touches the footer (it does not touch with 16:9 resolution) https://gyazo.com/a0683ec295a0be8fb440f060d63394a8 

 

Thanks in advance.

 

Best regards,
Mads

Shopify Partner
561 61 94

Hey there @MadsHolst,

Add the following code to your theme.scss.liquid file

.template-list-collections .main-content {
padding-bottom: 40px !important;
}
@media only screen and (max-width: 480px) {
.grid__item {
    width: 50% !important;
}
}

 

Hope that helps. Let me know if you need help with anything else.

Cheers

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gmail.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
New Member
2 0 1

Hey, thanks, it did sort out the problems, however, I tried changing the size/resolution of the browser window, and there seems to be a gap between "mobile" and "desktop/tablet", which both work fine now (thanks to you), but this middle gap that I am talking about looks like this: https://gyazo.com/e415605565555a31c6cd051e83c242be

Is this something you can help with as well? Thanks a lot so far!

 

Best regards,
Mads

0 Likes