Solved

dawn theme: avoid cutting images on large screens

10xfuel
Pathfinder
127 0 12

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

10xfuel_0-1705327643061.png

10xfuel_1-1705327663609.png

 

thanks!

 

 

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3398 450 503

This is an accepted solution.

Hi @10xfuel ,

Please follow these steps:

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

view - 2024-01-16T112158.789.png

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

view - 2024-01-16T112308.145.png

   {% 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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 3 (3)

BSS-Commerce
Shopify Expert
3398 450 503

This is an accepted solution.

Hi @10xfuel ,

Please follow these steps:

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

view - 2024-01-16T112158.789.png

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

view - 2024-01-16T112308.145.png

   {% 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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

10xfuel
Pathfinder
127 0 12

thank you so much! It has become much better, but if I open it full screen on 4k, the banners are still cut off. How can this be avoided?

10xfuel_0-1705395845780.png

 

 

 

10xfuel
Pathfinder
127 0 12

thank you - this solution is already much better than before!