dawn theme: avoid cutting images on large screens

10xfuel · ‎01-15-2024

Hi! On large monitors these two pictures on www.10xfuel.com get cut on top and on the bottom - how to avoid this?

thanks!

BSS-Commerce · ‎01-15-2024

Please follow these steps:

Step 1: Go to admin -> Themes -> Edit code

Step 2: Find the theme.liquid file and add the code behind the <head> tag

   {% style %}
      @media only screen and (min-width: 1550px) {
          div#Banner-template--15940951933066__image_banner_KWiDdp {
              background-color: #eeff41;
          }
      
          div#Banner-template--15940951933066__image_banner_KWiDdp .media{
              background-color: #eeff41;
          }
      
          div#Banner-template--15940951933066__37026298-37c3-4d9a-979b-b53ddd6479ed {
              background-color: #5241ff;
          }
      
          div#Banner-template--15940951933066__37026298-37c3-4d9a-979b-b53ddd6479ed .media{
              background-color: #5241ff;
          }
          
          
          div#Banner-template--15940951933066__67737bd7-2e65-45a4-9759-96159688b69b {
              background-color: #eeff41;
          }
      
          div#Banner-template--15940951933066__67737bd7-2e65-45a4-9759-96159688b69b .media{
              background-color: #eeff41;
          }
      
          .banner__media.media img {
              width: 80% !important;
              left: 10% !important;
          }
      }
    {% endstyle %}

Result: https://www.loom.com/share/ca359be2f05e46a692eaacb2adbe61b3?sid=d915de42-f4f7-4282-ad1a-cf0cf89da6a4

Hope it helps @10xfuel

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSS-Commerce · ‎01-15-2024

Hi @10xfuel ,