How can I adjust a new banner to fit specific dimensions?

Store Design
1

Hi. If anyone can help that would be amazing. So I want a new banner following the specifications on this link.

https://jasper-trouser-ed1.notion.site/Banner-Sort-8db5251167e5483d96746b1e79bc46d0

Refresh theme

https://hothugger.com/

Thank you!

2

Hi @Finn4

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_0-1678787541641.png
PageFlyVictor_0-1678787541641.png1600×794 164 KB

PageFlyVictor_1-1678787541407.png
PageFlyVictor_1-1678787541407.png1600×777 194 KB

Hope this answer helps.

Best regards,

Victor | PageFly

3

Hi @Finn4

Please follow these steps:

  • Go to Online store > Themes > Edit code, find the base.css file and add the following CSS to the bottom:
.banner__media media img {
    width: 600px;
    height: 600px;
    border-radius: 60px;
    object-position: center right !important;
}
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
    right: 300px;
    bottom: 100px;
}
.banner__heading.h1 span {
    color: rgba(var(--color-foreground),.75);
}
.banner__buttons a {
      background-color: rgba(var(--color-button),var(--alpha-button-background));
	color: white;
	font-weight: 500;
}
.banner__media.media {
      height: 700px;
}

We hope that this can help you.