FIT PRODUCT COLLECTION ON FRAME BORDER

Solved

FIT PRODUCT COLLECTION ON FRAME BORDER

josoneryx1890
Excursionist
34 0 5

 

josoneryx1890_1-1719810526751.pngjosoneryx1890_2-1719810603109.png

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

Accepted Solution (1)

GTLOfficial
Shopify Partner
273 51 52

This is an 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
3.png


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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

View solution in original post

Replies 16 (16)

Vinsinfo
Shopify Partner
352 125 118

@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

 

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

 

Result will be like,
Vinsinfo_2-1719811665365.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
josoneryx1890
Excursionist
34 0 5

It's not working 😞

Vinsinfo
Shopify Partner
352 125 118

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

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
josoneryx1890
Excursionist
34 0 5

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
Shopify Partner
352 125 118

@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

 

 

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.

 

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

Abdosamer
Shopify Partner
836 149 169

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%;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
josoneryx1890
Excursionist
34 0 5

It's not working 😞

 

Abdosamer
Shopify Partner
836 149 169

@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;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
josoneryx1890
Excursionist
34 0 5

Still not working 😞 Thank u

Abdosamer
Shopify Partner
836 149 169

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
josoneryx1890
Excursionist
34 0 5

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

here is the link of our shop

Abdosamer
Shopify Partner
836 149 169

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

GTLOfficial
Shopify Partner
273 51 52

This is an 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
3.png


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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
josoneryx1890
Excursionist
34 0 5

Still don't working 😞

josoneryx1890
Excursionist
34 0 5

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

 

GTLOfficial
Shopify Partner
273 51 52

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh