How can I resize the banner image section to fit text?

Store Design
,
1

Hi guys,

im trying to make this section smaller, so it just fits the text inside.

MyEcomAgent_0-1698764855425.png
MyEcomAgent_0-1698764855425.png1359Ɨ609 103 KB

I tried a lot, sadly im at my limits. :joy:

PW: 2023

1 Like
2

Hi @MyEcomAgent

You can also adjust the height of your image, I think that is a better way. But if you are not able to do it, you can do the following instructions below.

  • From your Shopify admin dashboard, click on ā€œOnline Storeā€ and then ā€œThemesā€.
  • Find the theme that you want to edit and click on ā€œActionsā€ and then ā€œEdit codeā€.
  • In the ā€œAssetsā€ folder, click on ā€œbase.css, style.css or theme.cssā€ file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#Banner-template--19895546118478__aa752136-1f0d-4e06-8fcb-7fb84abe85fa .banner__media.media {
 height: 100px; 
}

div#Banner-template--19895546118478__aa752136-1f0d-4e06-8fcb-7fb84abe85fa {
    min-height: 100px;
}

div#Banner-template--19895546118478__aa752136-1f0d-4e06-8fcb-7fb84abe85fa img {
    object-fit: cover;
    height: 200px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
  • And Save.

NOTE: Adjust the padding of your sections to match the spaces.

  • Result:

Made4uoRibe_0-1698767888124.png
Made4uoRibe_0-1698767888124.png1608Ɨ904 260 KB

Please donā€™t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like