Re: Featured collection: full width problem

How can I make my featured collection display full width?

lukasz666
Explorer
53 0 12

Hello there,

 

I managed to make most of the element on landing page full width but I am not able to do the same to the collection (any collection actually not only the one featured on home page) 

 

Could you please? 

 

https://artisanroast.co.uk/

 

I would like all the collection to display the same as rest of the page and not be limited by more narrow container. 

 

Additionally: Product carousel on home page could be full width also if possible! 

 

many thanks, 

 

Replies 5 (5)
lukasz666
Explorer
53 0 12

Great. Looking forward to potential sollution! 

Moeed
Shopify Partner
6719 1814 2198

Hey @lukasz666 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

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

<style>
.container.mt-10.mt-lg-25 {
    max-width: 100% !important;
}
</style>

Moeed_0-1691580723254.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


lukasz666
Explorer
53 0 12

Hello, 

 

Brilliant. This worked and collections are now full width. Thank you, 

 

Would you be able to help me with the product carousel on home page so its full width as well? Screenshot 2023-08-09 at 13.04.43.png

Moeed
Shopify Partner
6719 1814 2198

Hey @lukasz666 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

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

 

<style>
div#shopify-section-1537200465879 .container {
    margin: 0;
    max-width: 100% !important;
}
</style>

 

Moeed_0-1691583336145.png

 

I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


lukasz666
Explorer
53 0 12

Brilliant thank you. 

 

Very last small thing: while change worked great, there is this gap between products and 'explore our range' button. not sure how to deal with that!