Fit product collection on frame border

Store Design
,
1

josoneryx1890_1-1719810526751.png
josoneryx1890_1-1719810526751.png1226Ă—635 142 KB

josoneryx1890_2-1719810603109.png
josoneryx1890_2-1719810603109.png1110Ă—575 280 KB

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

2

@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”.

Vinsinfo_0-1719811643926.png
Vinsinfo_0-1719811643926.png417Ă—453 17.4 KB

  1. Then scroll down and paste the below code in the “Custom CSS” field and save changes.
.page-width-desktop {
    max-width: 100% !important;
}

Vinsinfo_1-1719811657012.png
Vinsinfo_1-1719811657012.png418Ă—726 33.4 KB

Result will be like,

Vinsinfo_2-1719811665365.png
Vinsinfo_2-1719811665365.png1862Ă—834 251 KB

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

3

It’s not working :disappointed_face:

4

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

It’s not working :disappointed_face:

6

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

Still not working :disappointed_face: Thank u

8

@josoneryx1890 , I don’t see the code inside the “base.css” file?

9

@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.

10

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

here is the link of our shop

1 Like
11

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

12

@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.

13

@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.

Vinsinfo_0-1719818308373.png
Vinsinfo_0-1719818308373.png769Ă—217 7.69 KB

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.

14

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

3.png
3.png1881Ă—754 234 KB

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

1 Like
15

Still don’t working :disappointed_face:

16

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?

josoneryx1890_0-1719819718480.png
josoneryx1890_0-1719819718480.png1896Ă—566 192 KB

17

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