Custom image banner height on mobile view

Store Design
,
1

Hi there! I wondered if anyone can help? I am very happy with how my image banner appears on the desktop but the height is not appropriate for mobile view. I need to make it bigger so the text and logo dont over-lap. Do you know where in the code I can edit the height of the banner, to increase it for the mobile view? It is currently on the largest banner setting within the ‘customise’ section. Thank you.

1 Like
2

In the code editor, locate and open the theme’s main CSS file. It is typically named theme.scss.liquid or theme.css.liquid

To target the mobile view specifically, you can use CSS media queries. Add the following code below the existing banner height code:

@media (max-width: 767px) {
  .banner {
    height: 400px; /* Adjust the height value as needed */
  }
}
1 Like
3

@EmilyH_1 Can you share your store url ?

4

Hey there, more than happy to help. To start, can you share the link to your website?