Separate Banner For Mobile

New Member
2 0 0

Hello,

I currently use the Fashionopolism theme for my store https://www.theveganwarehouse.com/ 

I want to be able to create separate home page banners for mobile and for desktop. The banners that work well for desktop do not automatically resize on mobile and they end up being cut off.

Please advise if anyone has been able to figure this out!

Ewelina

0 Likes

Hey, does your theme support sections? if yes you can duplicate the hero slideshow section and with the help of CSS media queries you can switch them based on screen sizes.

Available for hiring. Inbox me lixonic[at]gmail[dot]com
1 Like
New Member
2 0 0

Hey- our theme does not support sections. Is there another way we can have seperate images for mobile vs. desktop? 

0 Likes
New Member
2 0 0

Hello - I'm trying to do the same thing and my template Parallax has sections. Can you explain further?


@Lixon_Louis wrote:

Hey, does your theme support sections? if yes you can duplicate the hero slideshow section and with the help of CSS media queries you can switch them based on screen sizes.


 

0 Likes

First of all backup the original theme and try these steps on a duplicate one, because the theme code I'm showing is not parallax. This might not be a perfect solution, but it will give you an idea about what i said above.

 

#1 In the slideshow section, locate the image block and duplicate it with different id and label. Save that and Go to customize theme menu. You will get an option for mobile image.

 

#2 Next for displaying that image, Locate the image tag inside slideshow container and duplicate the same with different src   and  a css class  which will switch them based on screen sizes.

 

slideshow1.pngslideshow2.png

 

#3 Media Queries. This should go at the very bottom of your theme.scss.liquid Or styles.scss.liquid . Alternatively you can use theme's own helper classes if available. like `small--hide` && `medium-up--hide` 

 

/* For mobile */
@media (max-width:800px){
  .desktop-only{ display:none }
  .mobile-only{ display: block}
}
/* For Desktop */
@media (min-width:800px){
  .desktop-only{ display: block }
  .mobile-only{ display: none }
}

 

Available for hiring. Inbox me lixonic[at]gmail[dot]com
0 Likes
New Member
2 0 0

Thanks so much for this! I'm just getting to it now. 

 

So, here's what I encountered... 

 

Because parallax has a ton of dynamic features 'if' statements abound. I think I placed the code in the wrong spot in slideshow.liquid because I end up  with a placeholder image plopped under the main image (on both desktop and mobile). What would be the basic logic for working around the if statements?

0 Likes
New Member
1 0 0

Hi Lixon I am working on brooklyn theme i was able to add a separate section for mobile image in layout properties. However I am not able to call the image on mobile devices. here is a snapshot of theme.liquid code

<img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %}"
{%- if forloop.first == true -%}


data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">

<div class="mobile_only-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '' }}');"{% endif %}></div>
{%- endif -%}
</noscript>
{%- assign img_url = block.settings.image | img_url: '' | replace: '.', '_{width}x.' -%}
<img class="mobile_only--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %}"
{%- if forloop.first == true -%}
{%- endif -%}

data-src="{{ img_url }}"
data-widths="[540, 720,]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
{%- endif -%}

0 Likes