Solved

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

Alessio0000
Tourist
32 0 3

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 

截屏2023-09-06 10.47.48.png

 

 

This is my store:

截屏2023-09-06 10.49.02.png

Accepted Solution (1)
David_SHT
Globetrotter
605 124 122

This is an 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>

 

David_SHT_0-1693991092047.png

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

David | SalesHunterThemes team

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

View solution in original post

Replies 8 (8)

Moeed
Shopify Partner
3531 890 1106

Hey @Alessio0000 

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
Alessio0000
Tourist
32 0 3

David_SHT
Globetrotter
605 124 122

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.

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

David_SHT
Globetrotter
605 124 122

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>

 

David_SHT_0-1693990685028.png

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

David | SalesHunterThemes team

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

Alessio0000
Tourist
32 0 3

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
Tourist
32 0 3

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
Globetrotter
605 124 122

This is an 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>

 

David_SHT_0-1693991092047.png

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

David | SalesHunterThemes team

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

Melinda5
Explorer
52 3 11

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;
}

Screenshot 2023-10-04 at 7.38.40 PM.png
Store: https://airic4eofwetrzsy-26499285045.shopifypreview.com

Thank you in advance!!!