REFRESH theme - Image banner is not adapting to screen on mobile view

[pepinaswelt]

I’m using REFRESH theme and image banner size is perfect in the desktop view but it doesn’t adapt to screen on mobile view… their sides get cropped. Can someone please help me? Many thanks in advance

[Ahmad31]

Edit the CSS:

• In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
• Open the file where the banner CSS is defined, usually in assets/base.css or assets/theme.css.

@media screen and (max-width: 768px) {
.banner-class { /* Replace .banner-class with the actual class of your banner */
background-size: contain !important; /* Ensures the entire image is visible /
background-position: center center !important; / Centers the image */
background-repeat: no-repeat !important;
height: auto !important;
}
}

[steve_michael2]

Hello!

Please share “Store URL”.

Thanks.

[Ahmad31]

Edit the CSS:

• In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
• Open the file where the banner CSS is defined, usually in assets/base.css or assets/theme.css.

@media screen and (max-width: 768px) {
.banner-class { /* Replace .banner-class with the actual class of your banner */
background-size: contain !important; /* Ensures the entire image is visible /
background-position: center center !important; / Centers the image */
background-repeat: no-repeat !important;
height: auto !important;
}
}

[pepinaswelt]

Hi Ahmad31,

thank you so much for your quick reply!

how do i find out which class my banner has?

BR

Manuel

[pepinaswelt]

Hello Steve_michael2,

thank you so much for your support!

It´s difficult to share the “Store URL” because it´s still in the hidden mode.

BR

Manuel

[Ahmad31]

To determine the class assigned to your banner, you can use your browser’s developer tools. Here’s how to do it:

Steps to Find the Class of Your Banner:1. Open your website in a browser (e.g., Chrome, Firefox, Edge).

1. Right-click on the banner you want to inspect.

2. Select “Inspect” or “Inspect Element” from the context menu. This will open the browser’s developer tools.

3. In the developer tools, the HTML structure of your webpage will appear. The specific element corresponding to your banner will be highlighted.

4. Look at the class attribute of the highlighted HTML element. This will tell you the class or classes applied to the banner.

   Example:

   If the HTML looks like this:

   The banner has the classes banner-section and hero-banner.

   1. If the banner has additional styling or behavior, check for any parent containers or sibling elements that might also affect it.Let me know if you need help understanding the output or applying changes to the banner!

[steve_michael2]

You can share screen short too.

[pepinaswelt]

i have added the following code to asset/base.css:

@media screen and (max-width: 768px) {
.slideshow__text-wrapper banner__content banner__content–top-left page-width banner–desktop-transparent scroll-trigger animate–slide-in">

{ background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; height: auto !important; } }

Is this correct?

Because it is unfortunately not working… sorry i´m a newbie

BR

[Ahmad31]

No, you are using wrong class. Please provide me your store Url i will help you to provide complete accurate solution

[Ahmad31]

Try with this class if it’s not working, i need the store url for your help.
@media screen and (max-width: 768px) {

.banner__content {

background-size: contain !important; /* Ensures the entire image is visible */

background-position: center center !important; /* Centers the image */

background-repeat: no-repeat !important;

height: auto !important;

}

}

[pepinaswelt]

Pepinas Welt Merchandising Shop

thank you so much!!! ‌‌:)

[Ahmad31]

• Log in to your Shopify Admin.
• Navigate to Online Store > Themes > Actions > Edit Code.
• In the Assets folder, locate the file named theme.css (or base.css) and open it.
• Scroll to the bottom of the file and paste the code above.
• Save the file and refresh your store to see the changes.

/* Mobile View Adjustments */
@media screen and (max-width: 990px) {
  header-drawer {
    display: flex; /* Ensure header drawer is visible */
    justify-content: space-between; /* Adjust spacing for items */
    margin-left: 0; /* Reset the negative margin */
    padding: 10px; /* Add some padding for better spacing */
  }

  .scrolled-past-header .header__heading-logo-wrapper {
    width: 90%; /* Increase the logo size for better visibility */
    margin: 0 auto; /* Center the logo */
  }

  .menu-drawer-container {
    flex-direction: column; /* Stack menu items vertically for better layout */
    align-items: flex-start; /* Align items to the left */
    padding: 10px; /* Add some padding around the menu */
  }

  .list-menu--inline {
    display: block; /* Switch to block layout for better readability */
  }

  .list-menu__item {
    justify-content: flex-start; /* Align items to the left */
    padding: 5px 0; /* Add spacing between items */
    line-height: 1.5; /* Increase line height for better readability */
  }

  .list-menu__item--link {
    padding: 0.8rem 0; /* Add more spacing for touch accessibility */
    font-size: 1rem; /* Adjust font size for mobile */
    text-align: left; /* Align links to the left */
    display: block; /* Ensure the links stack properly */
  }

  /* Adjust summary styling for better appearance */
  summary.list-menu__item {
    padding: 0.5rem 0; /* Adjust padding for touch-friendly interaction */
  }
}

/* Extra Small Devices (Max Width: 600px) */
@media screen and (max-width: 600px) {
  header-drawer {
    padding: 15px; /* Increase padding for smaller screens */
  }

  .menu-drawer-container {
    padding: 10px; /* Add extra padding around the menu */
  }

  .list-menu__item--link {
    font-size: 0.9rem; /* Reduce font size slightly for very small screens */
  }

  .scrolled-past-header .header__heading-logo-wrapper {
    width: 85%; /* Slightly reduce the logo size for very small screens */
  }
}