How can I adjust the collection image size to full width in Dawn theme?

Store Design
1

I want the collection image would be full width on its page. Now the image is on the right side. Can anyone help me with this?:slight_smile: I use Dawn theme.

Tikrautuvele_0-1648559800821.png
Tikrautuvele_0-1648559800821.png1490×689 181 KB

1 Like
2

Hi @Tikrautuvele ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

sure, https://tikrautuvele.lt/

4

@Tikrautuvele

sorry for that can you please share store url

1 Like
5

https://tikrautuvele.lt/

6

@Tikrautuvele

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-collection-hero.css ->paste below code at the bottom of the file.
@media screen and (min-width: 750px) {
.collection-hero.collection-hero--with-image {
    padding: 0;
}
.collection-hero__image-container {min-height: 30rem;
    right: -34vh;}
}
1 Like
7

Maybe I explained it wrong, what I need is that collection image would be in this area, marked in screenshot. Is it possible?

Tikrautuvele_0-1648562221698.png
Tikrautuvele_0-1648562221698.png1264×549 388 KB

8

@Tikrautuvele

can you please confirm this look?

KetanKumar_0-1648579095153.png
KetanKumar_0-1648579095153.png1920×1080 412 KB

1 Like
9

yes, exactly!

2 Likes
10

Hi @Tikrautuvele ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-collection-hero.css->paste below code at the bottom of the file:
@media (min-width: 750px) {
    .collection-hero--with-image .collection-hero__inner {
        position: relative;
    }
    .collection-hero--with-image .collection-hero__text-wrapper {
        position: absolute;
        z-index: 1;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .collection-hero--with-image .collection-hero__title {
        color: #fff;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

11

@Tikrautuvele

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-collection-hero.css ->paste below code at the bottom of the file.
@media (min-width: 750px) {
.collection-hero__image-container {
    flex: 1 0 100%;
    margin: 0;
    min-height: 30rem;
}
.collection-hero--with-image .collection-hero__text-wrapper {
    flex-basis: 100%;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0;
    top: 50%;
    z-index: 1;
}
.collection-hero--with-image .collection-hero__inner {
    position: relative;
    padding: 0;
}
.collection-hero--with-image .collection-hero__title {
    color: #FFF;
}
}
2 Likes
12

Perfect, thank you so much!

1 Like
13

@Tikrautuvele

its my pleasure to help us

1 Like