Collection page image - make page width

[Schmeevey]

Hiya

New to shopify and on day 2 of the trial. 

How do I please make this image full width. Its the first image on my home page - so is that called the collection image? 

Searched the form and have tried various codes in the coding, but none have worked. 

Thanks!

[rajweb]

Hey @Schmeevey,

Welcome to Shopify 🎉

It sounds like you're trying to make your first homepage image full width. This is likely the hero image or a banner rather than a collection image. Let me guide you through a simple process:

Follow these steps:

1. Online Store > Themes > Customize

2. On the left panel, locate the section that contains your image. It's usually labeled as "Image with text", "Slideshow", or " Banner".

3. Check if there’s an option to set the image to "Full Width" in the setting of the section.

4. Enable it, and adjust padding/margins if necessary.

Add Custom CSS (if settings don't work):

If there’s no option for full width, you can add custom CSS:

1. Online Store > Themes > Edit Code 

2. Theme.css base.css file under Assets 

3. Add this CSS at the bottom of the file:

.section-name {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto;
    padding: 0;
}

Replace .section-name with the correct section class. You can inspect the page by right-clicking on the image and selecting "Inspect" to find the section class name.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[Made4uo-Ribe]

Hi @Schmeevey 

Please, share your store URL or the preview link. Thanks!