DAWN THEME - collection hero banner image + text position swap

[AnaELW]

Hello there 🙂

I would like to change the collection hero banner.

1) Swap the elements, so that the image is on the left, and the text is on the right (the default is the contrary order).

2) Fix the size of the image. I will only be uploading instagram posts which are a ratio of  1080*1080 (1:1 ratio). I would like the image to always keep this ratio for the image so that we can always see the full image. 

This is the store link: https://384f77-3.myshopify.com/collections/thewilsonsvintage

Pw: mewnaw

[PageFly-Noah]

Hi @AnaELW 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
div#shopify-section-template--19849623863624__banner .collection-hero__inner {
display: flex;
    flex-direction: row-reverse;
}
.collection-hero--with-image .collection-hero__text-wrapper {
padding-left: 4rem;
}
</style>

About the image, if you don't want the image to be stretched like this, you can make sure that you will use future image that has the big size 

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[AnaELW]

Cool! This almost works. The only thing missing:

- on mobile, the image dissapears.

- would it be possible to add a bit of padding between the picture and text? on my screen there's no padding.

Thank you!!

[PageFly-Noah]

Hi @AnaELW 

You can replace the code above with this one:

<style>
@media screen and (min-width: 767px){
div#shopify-section-template--19849623863624__banner .collection-hero__inner {
display: flex;
    flex-direction: row-reverse;
}
.collection-hero--with-image .collection-hero__text-wrapper {
padding-left: 4rem;
}
}
</style>

To increase the padding between text and image, you can increase the value '4em' to higher