custom css

[GaiaT]

I have contacted the assistence multiple times, I have hanged several CSS, I have changed the picture but nothing helped. My banner picture is ok if you look at it on desktop while it is not if you use a mobile. I have even used css that were published here in the community by other people who had my same problem and it still did not work, pls help me, I have tried averything. 

[goldi07]

Hello @GaiaT 

It looks like the issue is that your banner image displays correctly on desktop but not on mobile. Based on the screenshots, here are a few things to try:

Possible Causes:
1.Aspect Ratio Difference: Desktop and mobile use different aspect ratios. If your image is too wide, Shopify may crop it for mobile.
2.Theme Settings: The "Height" setting is set to "Adapt to first image." This can behave differently on mobile.
3.CSS Overrides: Some CSS might be affecting how the image scales or positions on mobile.
4. Lazy Loading Issues: Sometimes, lazy loading can prevent images from displaying properly on mobile.

@media screen and (max-width: 768px) {
  .banner__media {
    background-size: contain !important;
    background-position: center !important;
  }
  
  .banner__media img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
  }
}

Steps to Apply CSS:
Go to Online Store > Themes.
Click Customize on the active theme.
Click the Theme Settings icon (gear icon in the bottom left).
Go to Custom CSS and paste the code above.
Save and check the mobile version.

Let me know if this helps or if the issue persists!

Thank you 😊

Solution - Custom CSS Fix:
Try adding this custom CSS to your theme:

[GaiaT]

Thank you so much

 Thank you so much for your answer!!! Unfortunately it didn't work... this is what happened