Image Banner really small on mobile

[Leannedoja]

I had a really hard time getting my image to work on my desktop. It was all First really huge so I resized it using Canva. If I make it any bigger than what it is right now on my desktop, it completely gets thrown off so I will just settle for what it is on the desktop. However, when I go to my mobile, it is super small. I have tried some solutions from online, but the only way that my mobile device looks good is if my desktop version looks huge. Can you please give me the code for fixing it on my mobile? Thanks much 

The website is weekendcowgirlbotique.com

[sahilsharma9515]

Hi @Leannedoja The URL you have provided is not working, so can you please provide the correct URL of your store.

Best Regards

Sahil

[CodeCrafter11 · Accepted solution]

Hello @Leannedoja 

Sorry for the issue you're facing.

To Make the banner proper and big as it clearly visible on mobile devices, you just need to follow below steps:
1. Open the theme code.

2. Find the 'section-image-banner.css' and open the file.

3. at the end of the file, paste the below given css and save the file.

@media (max-width: 768px){
  .banner.banner--small
  {
     height: 450px;
  }
}

If the answer is helpful to you, Kindly like and accept the solution as solved.

Thank you.

Have a good day..!

[Leannedoja]

Thank you! 🙂

[Dan-From-Ryviu]

Hi @sahilsharma9515 

You can solve it by creating two image banner sections and adding two images, one for mobile and one for desktop.

Add this code to Custom CSS of the section you want to hide on the mobile.

@media (max-width: 749px) {
.banner {
    display: none !important;
}
}

Add this code to the Banner section you want to hide on the desktop.

@media (min-width: 768px) {
.banner {
    display: none;
}
}

[PageFly-Oliver]

Hi @Leannedoja 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
@media (max-width: 767px){
  .banner.banner--small {
     height: 420px !important;
  }
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly