Website VS Mobile view banner

[pinkpiguk]

Hello, 

I have updated my banner for pinkpiguk.com (the schoolwear one) and I like the dimensions. However, it doesn’t show correctly on mobile browsers. I’d like it to either show the picture of the young girl, or if the dimensions could be changed for mobile only please.

Thank you,

Aimee

[rajweb]

Hey @pinkpiguk ,

To make the updated schoolwear banner on pinkpiguk.com display properly on mobile, you can use responsive CSS techniques.

Option 1: Adjust Current Banner Responsively

This will keep the same image but control how it's displayed.

/* Default desktop banner styles */
.banner-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Mobile-specific styling */
@media only screen and (max-width: 768px) {
  .banner-image {
    height: 250px; /* Adjust height as needed */
    object-position: right center; /* Focus on girl on the right */
  }
}

Make sure your image has a class like banner-image, or adjust this CSS to match your theme’s banner class.

Option 2: Use Separate Mobile Banner Image

If you want to show a completely different banner image on mobile:

<picture>
  <source media="(max-width: 768px)" srcset="{{ 'schoolwear-banner-mobile.jpg' | asset_url }}">
  <img class="banner-image" src="{{ 'schoolwear-banner-desktop.jpg' | asset_url }}" alt="Schoolwear Banner">
</picture>

Upload both images in Assets and adjust the filenames accordingly.

Place the CSS code in your theme.css or base.css file (or equivalent), and place the HTML in your banner section in sections/banner.liquid or similar.

If you’d like help implementing this directly into your theme, please feel free to reach out—I'd be happy to assist.

Best Regards,

Rajat

[Shopify Expert]

[Dkpatel]

Hi, pinkpiguk

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media only screen and (max-width: 767px) {
.slideshow__image box {
    background-position: right center !important;
}
}
</style>

[Dan-From-Ryviu]

Hi @pinkpiguk 

You can try adding two slideshow sections, one for mobile and one for desktop, so you can use separate images. Then, add those codes to the Custom CSS of each section.

Add this code to custom CSS of mobile section

@media (min-width: 749px) {
.slideshow-wrapper { display: none; }
}

This code is for desktop section 

@media (max-width: 750px) {
.slideshow-wrapper { display: none; }
}

[AiTrillion]

Hello @pinkpiguk ,

You can use the media query for background image:

@media (max-width: 580px) {
.slick-initialized .slideshow__image{
background-position: center right !important;
}
}

Additionally, I would like to recommend using a mobile-optimized image which can be added using media queries. The image you have provided is best suited for Desktop but not for Mobile.

Please let me know if this works for you, or feel free to reply or send me a DM.