FIT PRODUCT COLLECTION ON FRAME BORDER

[josoneryx1890]

Guys please help me how to make this collection page (left) like this on the right (edit on PS)

[Vinsinfo]

@josoneryx1890 Please follow below steps to increase the width of the collection list. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Click "Collection list".

4. Then scroll down and paste the below code in the "Custom CSS" field and save changes.

.page-width-desktop {
    max-width: 100% !important;
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[josoneryx1890]

It's not working 😞

[Vinsinfo]

@josoneryx1890 Can you please paste the above code by following the steps we provided and let me know? So that, I can check why it is not working and provide solution based on it.

[josoneryx1890]

https://72d12c-be.myshopify.com/

here is the link of our shop

this is the code that i tried

.collection-list-wrapper.page-width.isolate.page-width-desktop.no-heading.no-mobile-link.section-template--22539441996064__collection_list_pTQBXp-padding {

max-width: 100% !important;
}

[Vinsinfo]

@josoneryx1890 This is because some code in base.css file was not closed properly, you need to fix so that the this code will work.

If you feel struggle to fix the code, you can remove this code from the base.css file and try the solution through customization mode which I was provided in the above message with screenshots, it will display the section in full width. Please let me know any other help needed.

[Abdosamer]

Hi @josoneryx1890 , go to base.css file and add the following code :

.collection-list-wrapper.page-width.isolate.page-width-desktop.no-heading.no-mobile-link.section-template--22539441996064__collection_list_pTQBXp-padding {
    
    max-width: 100%;
}

[josoneryx1890]

It's not working 😞

[Abdosamer]

@josoneryx1890  try to add this code instead :

.collection-list-wrapper.page-width.isolate.page-width-desktop.no-heading.no-mobile-link.section-template--22539441996064__collection_list_pTQBXp-padding {
    
    max-width: 100% !important;
}

[josoneryx1890]

Still not working 😞 Thank u

[Abdosamer]

@josoneryx1890 , I don't see the code inside the "base.css" file?

[josoneryx1890]

https://72d12c-be.myshopify.com/

here is the link of our shop

[Abdosamer]

@josoneryx1890 , it seems that other code or app is overwriting the code I gave you, would you mind If I send you an access request and add the code myself for better solving this problem?, feel free to contact me.

[GTLOfficial · Accepted solution]

Hello @josoneryx1890 
Please add this code in your base.css file

@media screen and (min-width: 750px) {
  .section-template--22539441996064__collection_list_pTQBXp-padding {
    max-width: 100% !important;
  }
}

result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[josoneryx1890]

Still don't working 😞

[josoneryx1890]

It does not working on base.css but when i paste it in here it worked

is it still okay if i keep it in here?

[GTLOfficial]

yes it will work, if you will paste it in custom css and save.

If this was helpful, hit the like button and mark the job as completed.
Thanks