Collection banner image full width of screen - dawn theme

[nudehaven]

I need help with my collection banner images, right now they are cropped to the right side of the screen but I want the image to be the full width of the banner without the collection name on the side as my collection names are in the picture.

[nudehaven]

my url is nudehaven.myshopify.com

[dmwwebartisan]

@nudehaven 

This needs some liquid/html changes with collection template. But try to check if following hack works.

Please add the following code at the bottom of your css file.

//for desktop
@media screen and (min-width: 750px){
.collection-hero--with-image .collection-hero__text-wrapper {
display: none;
}
}

//for mobile
.collection-hero--with-image .collection-hero__text-wrapper {
display: none;
}

[nudehaven]

this didn't work:( how else would I go about it?

[dmwwebartisan]

After adding above code. It should look like  this

[nudehaven]

which file did you upload to? I tried the base.css file and nothing changed:( I also want it so it doesn't it off their faces and the image is wrapped to the screen size

[GemPages]

Hello @nudehaven 

It's GemPages support team and glad to support you today.

You can follow these steps:

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

2. Open your base.css file and paste the following code below: 

.collection-hero .collection-hero__text-wrapper{
  display: none;
}
.collection-hero .collection-hero__image-container{
  margin: 0;
}
.collection-hero .collection-hero__image-container img{
  position: relative !important;
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[nudehaven]

It got rid of the collection title which I wanted but now it has a white border and I just want the picture to be the full collection banner with no spaces

[BSS-Commerce]

Hi @nudehaven 

+ We see that if you do as you want, the result will be like this:

--> It can't be perfect because the size of the section banner & img-banner has a completely different aspect ratio.
- If the model's face is shown, it will lose its title and the image will be broken.
- If you want the image not to be broken, it will reveal white space on both sides.

or

- If the size ratio of the banner = img, the result will be like this:

Please let me know in detail how you want your website to look. We're happy to support you.

[PageFly-Kate · Accepted solution]

Hi @nudehaven ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-collection-hero.css->paste below code at the bottom of the file:

.collection-hero--with-image .collection-hero__inner {
    width: 100%;
    padding: 0;
    max-width: 100%;
}
.collection-hero--with-image .collection-hero__text-wrapper {
    display: none
}

.collection-hero__image-container {
    margin-left: 0 !important;
}
.collection-hero__image-container img {
    top: 50% !important;
    transform: translateY(-50%) !important;
}
@media screen and (min-width: 750px) {
    .collection-hero__image-container {
        min-height: 37rem;
    }
}

I hope it would help you
Best regards,

Kate | PageFly

[nudehaven]

this worked thank you!

[SusanDev]

Hi @PageFly-Kate ,

Your solution worked for me as I had same issue and wanted the image full width. However, I'd like to show description on top of image. Is this possible? or even below the collection banner ...

Thanks

[JBMartin]

I have the opposite problem.  I am trying to have the full main-collection-banner just contain the description, with no featured image.  When I click to remove Featured Image in the page settings it leaves all the empty space on the right-hand side where the image should go.  I want the description to cover the full width of the banner (with some padding).  Any thoughts??  Thank you.

[Jess1-95]

I have just tried this and it has worked perfectly! I was wondering whether there was a way to have the collection title in the middle of the collection imagine banner at all?