Separate Banner Images On Mobile And Desktop - Dawn Theme

Store Design
1

Hey,

I’ve adopted this code by @LitCommerce

.banner__media:first-child {
    width: 100%;
}
.banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
	.banner__media:first-child {
		display: none;
	}
	.banner__media+.banner__media {
		width: 100%;
		display: block !important;
	}
}

Its an excellent solution for implementing different image banners in desktop versus mobile.

Unfortunately it also affects slideshows as well - which do not have options for a 2nd image. Meaning the slideshow completely disappears on mobile.

Is there any code so this solution only works on image banners and no slideshows? @LitCommerce

Many thanks

nooroots

2

Hi @nooroots ,

Please send me the code of slideshow.liquid file, I will check it for you.

Or you just need to upload the 2nd image like the first one, it will display fine.

3

Hey,

Thanks for getting back to me so quick.

So our website is www.nooroots.com

The solutions works well when I added the 2nd image to the banner section - then on desktop and mobile the images are the same.

Below is an example of what happens to the slideshow on the https://www.nooroots.com/pages/about page when the code is applied.

Apologies I wasn’t sure which part of the code you were specifically refering to on the slideshow.liquid. I have shared line 6 to 177.

Thanks

nooroots

Screenshot 2022-09-09 150605.png
Screenshot 2022-09-09 150605.png2176×1189 314 KB

Screenshot 2022-09-09 150623.png
Screenshot 2022-09-09 150623.png837×1003 18.6 KB

{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
  {%- style -%}
  @media screen and (max-width: 749px) {
    #Slider-{{ section.id }}::before,
    #Slider-{{ section.id }} .media::before,
    #Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
      padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  }

  @media screen and (min-width: 750px) {
    #Slider-{{ section.id }}::before,
    #Slider-{{ section.id }} .media::before {
      padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  }
  {%- endstyle -%}
{%- endif -%}
4

Hi @nooroots ,

Please change all code CSS:

.banner .banner__media:first-child {
    width: 100%;
}
.banner .banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
	.banner .banner__media:first-child {
		display: none;
	}
	.banner .banner__media+.banner__media {
		width: 100%;
		display: block !important;
	}
}

Hope it helps!

5

Hi,

I found a different solution that works better imo!

Dual Mobile and Desktop Image Option:

  1. Add to image-banner liquid approx. line 32 after first < in class after ":
{{ section.settings.show_on_device }}

Copy

  1. Add to image-banner liquid approx. line 123 after section settings:
{
  "type": "select",
  "id": "show_on_device",
  "options": [
  {
  "value": "mobile--device",
  "label": "mobile and tablet device"
  },
  {
    "value": "desktop--device",
    "label": "desktop device"
  },
  {
  "value": "show-all-devices",
  "label": "show to all devices"
  }
  ],
  "default": "show-all-devices",
  "label": "show this section to this device only",
  "info": "Choose which device you want this section to show"
  },

Copy

  1. add to bottom of base.css
}

.font-body-bold {
    font-weight: var(--font-body-weight-bold);
      }

  @media only screen and (max-width: 749px) {
    .mobile--device {
      display: block !important;
    }
    .desktop--device {
      display: none !important;
    }
  }

  @media only screen and (min-width:750px) {
    .mobile--device {
      display: none !important;
    }
    .desktop--device {
      display: block !important;
    }
  }

Copy

This will also work on slide shows or any other sections..

Good Luck!

nooroots

1 Like
6

hi, this really works, BUT comes a big problem - desktop image became blur : (

how to solve it?

7

Hi @DIG ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

8

didn’t get it where to use the 1st two code snippets

9

Thank you

10

would you be able to post the whole code ? My imagebanner liquid file has been altered beforehand. Thanks !

11

Hi there, we tried implementing this code on our website. The solution works perfectly for image banners, but unfortunately, in mobile view, the image disappears for slideshows. Would you be able to provide guidance on how we can fix this? This is the code we used for section-image-banner.css. Thank you in advance!

.banner .banner__media:first-child {
width: 100%;
}
.banner .banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner .banner__media:first-child {
display: none;
}
.banner .banner__media+.banner__media {
width: 100%;
display: block !important;
}
}

12

Could you provide clarity on where to post the first and second code? I’m trying to incorporate this into our page but cannot seem to make it work. Thank you in advance!

13

For an easier solution, I would suggest watching following video: