Dawn - Collection list 2 images full width with no space between them

[Alessio0000]

Hi,

I am trying to make the the two images full width so that they can occupy the entire page horizontally and no space between the two images. Something like the below website. If possible I would appreciate if someone also knew how to create and adjust the button on the image. Thank you in advance 

This is my store:

[Moeed]

Hey @Alessio0000 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[Alessio0000]

https://la-viola.com/

[David_SHT]

Hi @Alessio0000 ,

This is David at SalesHunterThemes.

I read your problem and it seems that I need to analyze your website to provide the solution here.

Would you please share your website URL

if your website is password protected then also provide the password.

David | SalesHunterThemes team.

[David_SHT]

Hi @Alessio0000 ,

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
.section-collection-list .collection-list {
 column-gap: 0 !important;
}
.section-collection-list .collection-list__item {
  width: 50% !important;
  max-width: 50% !important;
}
</style>

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[Alessio0000]

Hi David, I tried the code and it unfortunately only solved half of my issues. Despite removing the central spacing, I also wanted the images to occupy the entire page horizontally leaving no margin on the left and on the right.

Thank you very much!

[Alessio0000]

If possible, may you please also help me create a button like the sample website I provided? https://www.morjas.com/

Do you also know what font is the sample website using?

TYSM

[David_SHT · Accepted solution]

Hi @Alessio0000 ,

You can try again:

<style>
.section-collection-list .collection-list-wrapper {
  padding: 0 !important;
}
.section-collection-list .collection-list {
 column-gap: 0 !important;
}
.section-collection-list .collection-list__item {
  width: 50% !important;
  max-width: 50% !important;
}
</style>

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[Melinda5]

Hi @David_SHT I am having a similar issue but with my 3 column collection grid. I managed to remove the column gap, however it seems to create a white gap on the right side only. Do you happen to know how to fix this? 

The code I used is:

.collection-list-wrapper {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.section-collection-list .collection-list {
padding: 0 !important;
column-gap: 0 !important;
}


Store: https://airic4eofwetrzsy-26499285045.shopifypreview.com

Thank you in advance!!!