Different Slideshow Sizing for Mobile - Sense Theme

Store Design
, , , ,
1

Hi! I wanted to change the size of how the slideshow looks on my mobile site. I like the way that the size is for my desktop site, however, it appears too small on the mobile version. I am currently using the Sense theme - and since this is a newer theme, there has not been much help here on the community so far. My shopify URL is pekotown.com. I am assuming that this has to do with the slideshow.liquid code. So am pasting what I currently have as the code:

@media screen and (min-width:750px){
#shopify-section-template–16937413640456__4516fe48-f41b-4959-84d5-3303257084b9{
display: none; visibility: hidden;}
}

@media screen and (max-width:749px){
#shopify-section-template–16937413640456__2dfe69f5-2aa0-4862-87c6-0d9e9f7476bc{
display: none; visibility: hidden;}
}

Thank you and please let me know if there is anything else that you may need in order to help! :slightly_smiling_face: Thank you!

2

Sorry! I realized i pasted the wrong code. Here is the code for slideshow.liquid that I currently have:

{{ ‘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.heading != blank -%}

{{ block.settings.heading }}

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

{{ block.settings.subheading }}

{%- endif -%} {%- if block.settings.button_label != blank -%} {%- 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”: “url”,
“id”: “image_link”,
“label”: “Image Link”
},
{
“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 %}

3

Hi @karenchans
Do you want to add different slide show, or you only need to add the different image?

4

Hi,

We need to create separate image upload options for mobile and desktop. To create this we need to customize the slider.liquid code

5

I wanted to have a different slideshow size for the mobile version! So the slideshow would be separate sizes for Desktop vs. Mobile. Is there any solution for this? Thank you so much!