How do I display separate image banners for desktop and mobile

Store Design
1

I want to upload separate images for desktop and mobile (each fits for both devices but I don’t know how)

Website: https://b7865f-2.myshopify.com/

Theme: Dawn

1 Like
2

  1. Determine breakpoints: Identify the screen size breakpoints where the layout of your website changes from desktop to mobile view. Common breakpoints include around 768 pixels or lower for mobile devices.

  2. Implement responsive design: Use CSS media queries to apply different styles or image sources based on the screen size. In your CSS code, you can target specific breakpoints and specify different image sources for desktop and mobile devices.

    Here’s an example of how to use media queries in CSS:

/* Styles for desktop */
@media (min-width: 768px) {
  .your-image-class {
    background-image: url('desktop-image.jpg');
  }
}

/* Styles for mobile */
@media (max-width: 767px) {
  .your-image-class {
    background-image: url('mobile-image.jpg');
  }
}

In the above example, replace .your-image-class with the appropriate CSS class or selector for the image you want to display differently. Adjust the image URLs (desktop-image.jpg and mobile-image.jpg) to match the actual file names and locations of your images.

3

I’m confused with Adjust the image URLs (desktop-image.jpg and mobile-image.jpg) to match the actual file names and locations of your images. how do I find the image URL (where do I upload the image in the first place?)

4

Hello @3baid

According to your query need to follow the following steps that given below-

You should use two images, one for the desktop image that you have already added and after that, you need to add one image for mobile in that

(after the desktop image banner), both of which should be appropriately sized.

So on the desktop, you need to apply below the .css example:

.mobile-img-class {
    display: none;
  }

Adjust the breakpoint according to your website’s screen size. On mobile:

@media(max-width: 468px) {
    .desktop-image-class {
      display: none;
    }

    .mobile-img-class {
      display: block;
      width: 100%;
      height: auto;
    }
  }

Apply for classes according to your website.