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

MadsHolst
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

UmairA
Shopify Partner
878 86 177

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

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
MadsHolst
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
JamesBish
New Member
10 0 0

Hi,

Thanks for this I have made those changes and it has worked in the sense that I have two collection images in a row on mobile, however it has also meant that the copy in the rich-text content blocks has shifted to the left half of the screen on mobile (on desktop the rich-text content blocks remains fullscreen width).

I was wondering whether you know why this is the case and if you have a fix i.e. so the copy on mobile spreads across the entire screen not just the left half.

Many thanks for your help in advance.

JB

 

0 Likes
Kofiem
Explorer
63 0 33

Hi @UmairA 

I found myself having the same problem so also used your code... it solved my main issue but created another one so wonder if you could help me out.

noticed that it also makes my articles appear like that but would like them to appear only one on each row as before.. is there a way to fix that within the code?

Kofiem_0-1615797089458.pngKofiem_1-1615797213384.png

 

thank you

0 Likes