Making page banner fixed size in mobile

Site URL: http://www.radiantlifeschool.com

Hi all,

My client requested custom banners (with text on the image) for her site. However, due to the responsive design of mobile, the banners are being clipped so the text on them is unreadable. 

Is there a custom CSS code I can use to make the banners a static image in mobile?

Thanks so much.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5e7d2ee6b4d27021651d4abc {
  .page-banner-has-image img {
      width: 100% !important;
      height: auto !important;
      left: 0 !important;
  }
  .page-banner-wrapper.page-banner-has-image {
      height: 200px !Important;
  }
}
}

Hi @tuanphan I'm trying to use your code above. I want to reduce the banner image height on mobile only. website: www.blankforces.com
this is the code... i edited the collection number from your code. Thanks for any help!!!

@media screen and (max-width:640px) {
body#collection-5caf667d104c7be537b00c28 {
  .page-banner-has-image img {
      width: 50% !important;
      height: 30px !important;
      left: 0 !important;
  }
  .page-banner-wrapper.page-banner-has-image {
      height: 50px !Important;
  }
}
}

2 hours ago, kevin310 said:

Hi @tuanphan I'm trying to use your code above. I want to reduce the banner image height on mobile only. website: www.blankforces.com
this is the code... i edited the collection number from your code. Thanks for any help!!!

@media screen and (max-width:640px) {
body#collection-5caf667d104c7be537b00c28 {
  .page-banner-has-image img {
      width: 50% !important;
      height: 30px !important;
      left: 0 !important;
  }
  .page-banner-wrapper.page-banner-has-image {
      height: 50px !Important;
  }
}
}

 

Did you solve?

Hi @tuanphan no not yet. The code I posted above is not working for me. Thanks or checking in to it! I just want to reduce the height of the banner image on mobile. Thanks for your help!