slideshow size mobile vs desktop

[goblender]

I have this slideshow on top of my homepage.

www.goblender.eu

I only have 4 options to choose the slideshow size
adapt to first image

small

medium

large

I have allready coded a little but to show different images on mobile and desktop.

the problem is that I think the image is not showing enough on mobile version. Not even at “large”. when I choose adapt to first image.. it adapt to the desktop first image.. so it is smaller than “small”.

How can I fix this

thank you

[niraj_patel]

Hello @goblender

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 749px) { .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content { min-height: 31rem !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[goblender]

Still not working

[goblender]

Would be great if I could choose adapt to first image and on desktop it adapt to desktop first image and mobile adapt to mobile first image

can you help with this?

This is the code right now:

{{ ‘section-image-banner.css’ | asset_url | stylesheet_tag }}
{{ ‘component-slider.css’ | asset_url | stylesheet_tag }}
{{ ‘component-slideshow.css’ | asset_url | stylesheet_tag }}

{%- 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 -%}

<slideshow-component
class=“slider-mobile-gutter{% if section.settings.layout == ‘grid’ %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}”
role=“region”
aria-roledescription=“{{ ‘sections.slideshow.carousel’ | t }}”
aria-label=“{{ section.settings.accessibility_info | escape }}”

{%- if section.settings.auto_rotate and section.blocks.size > 1 -%}

{% render 'icon-caret' %}

{%- if section.settings.slider_visual == 'counter' -%} 1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }} {%- else -%}

{%- for block in section.blocks -%} {%- if section.settings.slider_visual == 'numbers' -%} {{ forloop.index -}} {%- else -%} {%- endif -%} {%- endfor -%}

{%- endif -%}

{% render 'icon-caret' %}

{%- if section.settings.auto_rotate -%}
<button
type=“button”
class=“slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay–paused{% endif %}”
aria-label=“{{ ‘sections.slideshow.pause_slideshow’ | t }}”

{%- render ‘icon-pause’ -%}
{%- render ‘icon-play’ -%}

{%- endif -%}

{%- for block in section.blocks -%} {{ forloop.index }} {%- endfor -%}

{%- endif -%}

{%- for block in section.blocks -%} #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after { opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }}; }

{%- if block.settings.image -%} {%- liquid assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round if section.settings.image_behavior == 'ambient' assign sizes = '120vw' assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680' else assign sizes = '100vw' assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' endif -%} {{ block.settings.image | image_url: width: 3840 | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths }} {%- else -%} {%- assign placeholder_slide = forloop.index | modulo: 2 -%} {%- if placeholder_slide == 1 -%} {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%} {%- endif -%}

{%- if block.settings.image-mob -%} {%- liquid assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round if section.settings.image_behavior == 'ambient' assign sizes = '120vw' assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680' else assign sizes = '100vw' assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' endif -%} {{ block.settings.image-mob | image_url: width: 3840 | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths }} {%- else -%} {%- assign placeholder_slide = forloop.index | modulo: 2 -%} {%- if placeholder_slide == 1 -%} {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%} {%- endif -%}

{%- if block.settings.heading != blank -%}

{{ block.settings.heading }}

{%- endif -%} {%- if block.settings.subheading != blank -%}

{{ block.settings.subheading }}

{%- endif -%} {%- if block.settings.button_label != blank -%}

{{- block.settings.button_label | escape -}}

{%- endif -%}

{%- endfor -%}

{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}

{% render 'icon-caret' %}

{%- if section.settings.slider_visual == 'counter' -%} 1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }} {%- else -%}

{%- for block in section.blocks -%} {%- if section.settings.slider_visual == 'numbers' -%} {{ forloop.index -}} {%- else -%} {%- endif -%} {%- endfor -%}

{%- endif -%}

{% render 'icon-caret' %}

{%- if section.settings.auto_rotate -%}
<button
type=“button”
class=“slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay–paused{% endif %}”
aria-label=“{{ ‘sections.slideshow.pause_slideshow’ | t }}”

{%- render ‘icon-pause’ -%}
{%- render ‘icon-play’ -%}

{%- endif -%}

{%- for block in section.blocks -%} {{ forloop.index }} {%- endfor -%}

{%- endif -%}

{%- if request.design_mode -%}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.slideshow.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “select”,
“id”: “layout”,
“options”: [
{
“value”: “full_bleed”,
“label”: “t:sections.slideshow.settings.layout.options__1.label”
},
{
“value”: “grid”,
“label”: “t:sections.slideshow.settings.layout.options__2.label”
}
],
“default”: “full_bleed”,
“label”: “t:sections.slideshow.settings.layout.label”
},
{
“type”: “select”,
“id”: “slide_height”,
“options”: [
{
“value”: “adapt_image”,
“label”: “t:sections.slideshow.settings.slide_height.options__1.label”
},
{
“value”: “small”,
“label”: “t:sections.slideshow.settings.slide_height.options__2.label”
},
{
“value”: “medium”,
“label”: “t:sections.slideshow.settings.slide_height.options__3.label”
},
{
“value”: “large”,
“label”: “t:sections.slideshow.settings.slide_height.options__4.label”
}
],
“default”: “medium”,
“label”: “t:sections.slideshow.settings.slide_height.label”
},
{
“type”: “select”,
“id”: “slider_visual”,
“options”: [
{
“value”: “dots”,
“label”: “t:sections.slideshow.settings.slider_visual.options__2.label”
},
{
“value”: “counter”,
“label”: “t:sections.slideshow.settings.slider_visual.options__1.label”
},
{
“value”: “numbers”,
“label”: “t:sections.slideshow.settings.slider_visual.options__3.label”
}
],
“default”: “counter”,
“label”: “t:sections.slideshow.settings.slider_visual.label”
},
{
“type”: “checkbox”,
“id”: “auto_rotate”,
“label”: “t:sections.slideshow.settings.auto_rotate.label”,
“default”: false
},
{
“type”: “range”,
“id”: “change_slides_speed”,
“min”: 3,
“max”: 9,
“step”: 2,
“unit”: “s”,
“label”: “t:sections.slideshow.settings.change_slides_speed.label”,
“default”: 5
},
{
“type”: “header”,
“content”: “t:sections.all.animation.content”
},
{
“type”: “select”,
“id”: “image_behavior”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.all.animation.image_behavior.options__1.label”
},
{
“value”: “ambient”,
“label”: “t:sections.all.animation.image_behavior.options__2.label”
}
],
“default”: “none”,
“label”: “t:sections.all.animation.image_behavior.label”
},
{
“type”: “header”,
“content”: “t:sections.slideshow.settings.mobile.content”
},
{
“type”: “checkbox”,
“id”: “show_text_below”,
“label”: “t:sections.slideshow.settings.show_text_below.label”,
“default”: true
},
{
“type”: “header”,
“content”: “t:sections.slideshow.settings.accessibility.content”
},
{
“type”: “text”,
“id”: “accessibility_info”,
“label”: “t:sections.slideshow.settings.accessibility.label”,
“info”: “t:sections.slideshow.settings.accessibility.info”,
“default”: “Slideshow about our brand”
}
],
“blocks”: [
{
“type”: “slide”,
“name”: “t:sections.slideshow.blocks.slide.name”,
“limit”: 5,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.slideshow.blocks.slide.settings.image.label”
},
{

“type”: “image_picker”,
“id”: “image-mob”,
“label”: “Mobile Image”
},
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “Image slide”,
“label”: “t:sections.slideshow.blocks.slide.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “inline_richtext”,
“id”: “subheading”,
“default”: “Tell your brand’s story through images”,
“label”: “t:sections.slideshow.blocks.slide.settings.subheading.label”
},
{
“type”: “text”,
“id”: “button_label”,
“default”: “Button label”,
“label”: “t:sections.slideshow.blocks.slide.settings.button_label.label”,
“info”: “t:sections.slideshow.blocks.slide.settings.button_label.info”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.slideshow.blocks.slide.settings.link.label”
},
{
“type”: “checkbox”,
“id”: “button_style_secondary”,
“label”: “t:sections.slideshow.blocks.slide.settings.secondary_style.label”,
“default”: false
},
{
“type”: “select”,
“id”: “box_align”,
“options”: [
{
“value”: “top-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__1.label”
},
{
“value”: “top-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__2.label”
},
{
“value”: “top-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__3.label”
},
{
“value”: “middle-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__4.label”
},
{
“value”: “middle-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__5.label”
},
{
“value”: “middle-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__6.label”
},
{
“value”: “bottom-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__7.label”
},
{
“value”: “bottom-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__8.label”
},
{
“value”: “bottom-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__9.label”
}
],
“default”: “middle-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.label”,
“info”: “t:sections.slideshow.blocks.slide.settings.box_align.info”
},
{
“type”: “checkbox”,
“id”: “show_text_box”,
“label”: “t:sections.slideshow.blocks.slide.settings.show_text_box.label”,
“default”: true
},
{
“type”: “select”,
“id”: “text_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label”
},
{
“value”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label”
},
{
“value”: “right”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label”
}
],
“default”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.label”
},
{
“type”: “range”,
“id”: “image_overlay_opacity”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“label”: “t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label”,
“default”: 0
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “background-1”
},
{
“type”: “header”,
“content”: “t:sections.slideshow.settings.mobile.content”
},
{
“type”: “select”,
“id”: “text_alignment_mobile”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label”
}
],
“default”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label”
}
]
}
],
“presets”: [
{
“name”: “t:sections.slideshow.presets.name”,
“blocks”: [
{
“type”: “slide”
},
{
“type”: “slide”
}
]
}
]
}
{% endschema %}

[namphan]

Hi @goblender ,

Please go to theme.liquid file, find ‘31rem !important;’ and change:

‘31rem !important;’ => ‘38rem !important;’

[goblender]

It works when the settings is “large” and not adapt to image. But I want the desktop image to be adapt to image and not large. On large it is not fully shown as in adapt to image.

But works fine on large.
Do you have any suggestions on how to fix?

[namphan]

Hi @goblender ,

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

[STFUApparel]

Hi there, I’m having this issue as well. I’ve tried to enter the following code before in theme.liquid and it’s not working for me either:

@media screen and (max-width: 749px) { .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content { min-height: 38rem !important; } }

Can you help please?

[namphan]

Hi @STFUApparel ,

Please send the website link, I will check it for you