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

desaintclothing
Visitor
3 0 0

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!

Replies 9 (9)

Kani
Shopify Partner
468 125 224

Hi @desaintclothing 

 

tag <picture> may be the answer

Kani_0-1660990757945.png

Kani_1-1660990783818.png

here is the demo, you can edit base on it 🙂

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

 

 

<picture>
        <source media="(min-width: 768px)" srcset="{{ section.settings.image | image_url: width: 1500 }}" />
        <source media="(min-width: 300px)" srcset="{{ section.settings.image_mobile | image_url: width: 750 }}" />
        {{ 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
        }}
      </picture>

 

 

add json (scroll to bottom

 

 

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

 

 

Kani_2-1660990990623.png

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

 

upload your mobile image

Kani_3-1660991034936.png

 

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
desaintclothing
Visitor
3 0 0

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

desaintclothing
Visitor
3 0 0

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

LitExtension
Shopify Partner
4860 1002 1135

Hi @desaintclothing,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Kani
Shopify Partner
468 125 224

Hi @desaintclothing 

 

you should add this css code.

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

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

    height: 100vh;

  }

}
Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
MistaKool
Visitor
1 0 1

Thanks Brother For helping me with this issue 

I was struggling with this issue for a long time 

Thanks for your great help

goodintentions
Visitor
1 0 0

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! 

vivexed
Visitor
1 0 0

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

Uttara_1234
Visitor
1 0 0

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