How can I make image banner on mobile bigger please?

1 Like

@saabbb1212 can you please share your store url and also please share particular page url

Hey @saabbb1212 ,

To make the image banner bigger on mobile in your Shopify theme, you can adjust the CSS:

Follow these steps:

  1. Online Store > Themes

  2. Click Customize on your active theme.

  3. In the theme editor, click Theme Setting → Custom CSS (if available).

  4. Add the following code to increase the height and size of the image banner on mobile:

@media only screen and (max-width: 768px) {
  .banner-image-class {  /* Replace with the actual class name of your banner */
    height: 400px; /* Adjust height as needed */
    background-size: cover;
    background-position: center;
  }
}

You can adjust the height (e.g., 400px) and experiment with background-size settings (cover ensures it scales nicely without stretching).

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regard,

Rajat Sharma

Hello @saabbb1212
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.section + .section {
margin-top: 0px !important;
}
#Banner-template--23585674264850__image_banner {
height: 51rem !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like

thanks it worked! it was large to i changed to 35 rem :slightly_smiling_face:

Great..!!
Happy to help you.

1 Like