How can I adjust the width of my featured collection on the homepage?

Store Design
1

My featured collection on the home page has all of a sudden started showing full screen width (outer products flush against the outside border) Before this it was always sitting center, with an equal gap either side to match the rest of the home page.

Can someone please help me out here? Using ride theme.

Thank you!

2

Hello @nellienadine ,

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

3

https://oliandkubo.com/

I’ve changed the products to ghost imagery for now so you don’t see them sitting right on the border without a gap. But would like to have it fixed so I can do full images in the future.

Thank you!

4

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677047354832.png
GemPages_0-1677047354832.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1677047371898.png
GemPages_1-1677047371898.png1490×899 74.7 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

5

Thank you - this makes the products way too small when viewing in mobile view - and the margins don’t match those of the other elements on the home page.

Do you have any idea why it has suddenly switched to this view?

6

Hi @nellienadine

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the 

.collection.section-template--15506594136224__featured_collection-padding {
max-width: 150rem;
        margin: 0 auto !important;
        padding: 0px 5rem !important;
}
@media screen and (max-width: 767px){
.collection.section-template--15506594136224__featured_collection-padding  {
padding: 0px 1.5rem !important;
}

}

I added the code to fix the issue on mobile too

Hope this can help you solve the issue

Best regards,

Victor | PageFly

7

Thank you!

I had to paste in my base.css but it worked! Thanks for your help!