How can I extend the image banner height on the Dawn theme?

Store Design
, ,
1

I’m trying to extend the height of my image banner to show the whole image. I’ve tried editing the code with previous suggestions but it doesn’t seem to work. I attached a screenshot of the image below, the bottom gets cut off and I’d like to have the whole image visible. I’m using the Dawn theme from Shopify, any tips of pre written code suggestions would be appreciated

Screenshot 2023-08-16 at 7.05.03 PM.png
Screenshot 2023-08-16 at 7.05.03 PM.png3420×1940 741 KB

2

Hello @blacksoul666 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.css file

Add this following code at the bottom of page

@media (min-width: 768px) {
  .hero-banner {
    position: relative;
    width: 100%;
    height: 70vh;
    background-image: url('your-image-url.jpg');
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 767px) {
  .hero-banner {
    position: relative;
    width: 100%;
    height: 50vh;
    background-image: url('your-image-url.jpg');
    background-size: cover;
    background-position: center;
  }
}

Save and preview

Hope this can help.

Transcy