Solved

Image Banner really small on mobile

Leannedoja
Tourist
7 1 1

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

Accepted Solution (1)

CodeCrafter11
Tourist
3 3 3

This is an 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..!

View solution in original post

Replies 5 (5)

sahilsharma9515
Shopify Partner
986 124 187

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

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


CodeCrafter11
Tourist
3 3 3

This is an 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
Tourist
7 1 1

Thank you! 🙂

Dan-From-Ryviu
Shopify Partner
7721 1502 1509

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;
}
}

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PageFly-Oliver
Astronaut
878 190 171

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.