How do I display different images for mobile and desktop on image banner with the Dawn theme?

Store Design
1

I have been searching for a while, reading a lot of solutions, and watching some videos, but none of that has done the trick for me. Basically, I am trying to have a landing page where if the audience is on a desktop, the image will be horizontal and fill up the page, and if they are on mobile, the image will be a different vertical version (which I have made) and also fill up the page. I just need to be able to have different images for the image banner section on mobile and desktop. Help is greatly appreciated!

2

Hi @desaintclothing

tag may be the answer

Kani_0-1660990757945.png
Kani_0-1660990757945.png1886×846 134 KB

Kani_1-1660990783818.png
Kani_1-1660990783818.png784×595 205 KB

here is the demo, you can edit base on it :slightly_smiling_face:

1: Online store > themes > Actions > Edit code > Sections > image-banner.liquid

replace

{{ section.settings.image | image_url: width: 1500 | image_tag:
          loading: 'lazy',
          width: section.settings.image.width,
          height: image_height,
          class: image_class,
          sizes: sizes,
          widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
          alt: section.settings.image.alt | escape
        }}

with

add json (scroll to bottom

{
      "type": "image_picker",
      "id": "image_mobile",
      "label": "image mobile"
    }

Kani_2-1660990990623.png
Kani_2-1660990990623.png640×351 12.6 KB

add css

#Banner-{{ section.id }} .media img {
    object-fit: cover;
    object-position: center center;
    transition: opacity .4s cubic-bezier(.25,.46,.45,.94);
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

Kani_0-1660991536497.png
Kani_0-1660991536497.png1139×452 19.8 KB

upload your mobile image

Kani_3-1660991034936.png
Kani_3-1660991034936.png414×838 71.2 KB

2 Likes
3

Hi @Kani , thank you so much for your help! Your solution worked to display different images - however, on the mobile version, the image isn’t fitting the entire screen even though it’s vertical. It’s still stuck in a horizontal format where the bottom and top get cut off. How do I fix this? I have attached an image that shows my issue.

differentimagesbutnotvertical.PNG
differentimagesbutnotvertical.PNG2053×1207 192 KB

4

Hi @Kani , thank you so much for your help! Your solution worked to display different images - however, on the mobile version, the image isn’t fitting the entire screen even though it’s vertical. It’s still stuck in a horizontal format where the bottom and top get cut off. How do I fix this? I have attached an image that shows my issue.

differentimagesbutnotvertical.PNG
differentimagesbutnotvertical.PNG2053×1207 192 KB

5

Hi @desaintclothing ,

I checked and it shows fine, have you tried it on real device?

6

Hi @desaintclothing

you should add this css code.

@media screen and (max-width: 749px) {

  #Banner-{{ section.id }} .banner__content {

    height: 100vh;

  }

}
1 Like
7

Thanks Brother For helping me with this issue

I was struggling with this issue for a long time

Thanks for your great help

1 Like
8

Hi! This worked so great, however I want to also be able to enable the fixed background feature which no longer works after putting in this code… any chance you could help me with that? I am hoping that both on desktop and mobile the images can be fixed.

Thanks!

9

hi im facing this same issue and i do notsee the first code to replace from banner image liqued, is it outdated?

10

i am getting this error “Liquid error (sections/image-for-mobilehomepage line 11): invalid url input”