Hey, how can I make the slideshow cover the whole mobile screen?
Password: SAWBAW
Hi @Pam9 ,
Please go to Customize > Slideshow: vertical > Horizontal mobile slider height > 100vh
it will display fine.
Hey @LitCommerce , I did everything you mentioned but there’s still a bit space on the bottom. Could you please let me know what to do in order to cover that space as well?
Hi @Pam9 ,
Please send me the code of slider-vertical.liquid file, I will help you to change it
Hey @LitCommerce
{%- if section.blocks.size > 0 -%}
{%- liquid
if section.settings.mobile_size == ‘100vh’ and section.blocks.size == 1
assign navigation_padding = 65
else
assign navigation_padding = 120
endif
-%}
<image-slideshow id=“slider-{{ section.id }}”
style=“display:block”
class=“content-section gutter–off slider slider–vertical slider–scroll slider–horizontal-mobile-{{ section.settings.style_mobile }} {% if section.settings.mobile_size == ‘100vh’ %} slider–mobile-js-height {% endif %}”
data-options=‘{
“selector”: “.slide”,
“navigation”: false,
“watchCSS”: true
}’
data-blocks=“{{ section.blocks.size }}”
data-navigation_padding=“{{ navigation_padding }}”
{%- for block in section.blocks -%}
{%- if block.settings.url != blank and block.settings.button_label == blank -%}
{%- endif -%}
{%- if block.settings.url != blank and block.settings.button_label == blank -%}
{%- endif -%}
{%- if block.settings.image == blank -%}
{%- assign no = forloop.index | modulo: 2 | plus: 1 -%}
{{ ‘lifestyle-X’ | replace: ‘X’, no | placeholder_svg_tag }}
{%- else -%}
{%- liquid
assign sizes = ‘sizes=“(max-width: 948px) 100vh, calc(100vw - 200px)”’
render ‘lazy-image’, image: block.settings.image, type: ‘background’, alt: block.settings.title, sizes: sizes
-%}
{%- endif -%}
{%- if block.settings.color_text != ‘rgba(0,0,0,0)’ -%}
{%- liquid
assign color_text = block.settings.color_text
assign color_text_brightness = color_text | color_brightness
if color_text_brightness > 150
assign color_text_foreground = ‘#000’
else
assign color_text_foreground = ‘#fff’
endif
-%}
{% style %}
#slide-{{ block.id }} .slide__text,
#slide-{{ block.id }} .slide__text a {
color: {{ block.settings.color_text }};
}
#slide-{{ block.id }} .slide__title span {
background-image: linear-gradient(to right, {{ block.settings.color_text }}, {{ block.settings.color_text }});
}
#slide-{{ block.id }} a.button–solid {
background: {{ block.settings.color_text }};
color: {{ color_text_foreground }};
}
#slide-{{ block.id }} .button–solid path {
fill: {{ color_text_foreground }};
}
{% endstyle %}
{%- endif -%}
Hi @Pam9 ,
Sorry for the confusion, can you send me the code of the file: slider-horizontal.liquid
I will check it.
Hey @LitCommerce , no worries.
{%- if section.blocks.size > 0 -%}
{%- liquid
if section.settings.mobile_size == ‘100vh’ and section.blocks.size == 1
assign navigation_padding = 65
else
assign navigation_padding = 120
endif
-%}
<image-slideshow id=“slider-{{ section.id }}”
style=“display:flex”
class=“content-section slider full-width-section-content slider–horizontal slider–slide gutter–{% if section.settings.gutter_enabled %}on{% else %}off{% endif %} {% if section.settings.size == ‘100vh’ %} slider–mobile-js-height {% endif %}”
data-options=‘{
“selector”: “.slide”,
“navigation”: false,
“listenScroll”: true
}’
data-blocks=“{{ section.blocks.size }}”
data-navigation_padding=“{{ navigation_padding }}”
{%- for block in section.blocks -%}
{%- if block.settings.url != blank and block.settings.button_label == blank -%}
{%- endif -%}
{%- if block.settings.url != blank and block.settings.button_label == blank -%}
{%- endif -%}
{%- if block.settings.image == blank -%}
{%- assign no = forloop.index | modulo: 2 | plus: 1 -%}
{{ ‘lifestyle-X’ | replace: ‘X’, no | placeholder_svg_tag }}
{%- else -%}
{%- liquid
assign sizes = ‘sizes=“(max-width: 948px) 100vh, calc(100vw - 200px)”’
render ‘lazy-image’, image: block.settings.image, type: ‘background’, alt: block.settings.title, sizes: sizes
-%}
{%- endif -%}
{%- if block.settings.color_text != ‘rgba(0,0,0,0)’ -%}
{%- liquid
assign color_text = block.settings.color_text
assign color_text_brightness = color_text | color_brightness
if color_text_brightness > 150
assign color_text_foreground = ‘#000’
else
assign color_text_foreground = ‘#fff’
endif
-%}
Hi @Pam9 ,
I checked and the file you uploaded is not full, can you resend it?
Hey @LitCommerce ,
{%- if section.blocks.size > 0 -%}
{%- liquid
if section.settings.mobile_size == ‘100vh’ and section.blocks.size == 1
assign navigation_padding = 65
else
assign navigation_padding = 120
endif
-%}
<image-slideshow id=“slider-{{ section.id }}”
style=“display:flex”
class=“content-section slider full-width-section-content slider–horizontal slider–slide gutter–{% if section.settings.gutter_enabled %}on{% else %}off{% endif %} {% if section.settings.size == ‘100vh’ %} slider–mobile-js-height {% endif %}”
data-options=‘{
“selector”: “.slide”,
“navigation”: false,
“listenScroll”: true
}’
data-blocks=“{{ section.blocks.size }}”
data-navigation_padding=“{{ navigation_padding }}”
{%- for block in section.blocks -%}
{%- if block.settings.url != blank and block.settings.button_label == blank -%}
{%- endif -%}
{%- if block.settings.url != blank and block.settings.button_label == blank -%}
{%- endif -%}
{%- if block.settings.image == blank -%}
{%- assign no = forloop.index | modulo: 2 | plus: 1 -%}
{{ ‘lifestyle-X’ | replace: ‘X’, no | placeholder_svg_tag }}
{%- else -%}
{%- liquid
assign sizes = ‘sizes=“(max-width: 948px) 100vh, calc(100vw - 200px)”’
render ‘lazy-image’, image: block.settings.image, type: ‘background’, alt: block.settings.title, sizes: sizes
-%}
{%- endif -%}
{%- if block.settings.color_text != ‘rgba(0,0,0,0)’ -%}
{%- liquid
assign color_text = block.settings.color_text
assign color_text_brightness = color_text | color_brightness
if color_text_brightness > 150
assign color_text_foreground = ‘#000’
else
assign color_text_foreground = ‘#fff’
endif
-%}
{% style %}
#slide-{{ block.id }} .slide__text,
#slide-{{ block.id }} .slide__text a {
color: {{ block.settings.color_text }};
}
#slide-{{ block.id }} .slide__title span {
background-image: linear-gradient(to right, {{ block.settings.color_text }}, {{ block.settings.color_text }});
}
#slide-{{ block.id }} a.button–solid {
background: {{ block.settings.color_text }};
color: {{ color_text_foreground }};
}
#slide-{{ block.id }} .button–solid path {
fill: {{ color_text_foreground }};
}
{% endstyle %}
{%- endif -%}
{%- if block.settings.color_bg != ‘rgba(0,0,0,0)’ -%}
{% style %}
#slide-{{ block.id }} .slide__text:before {
background-color: {{ block.settings.color_bg }};
}
{% endstyle %}
{%- endif -%}
{%- endfor -%}
{% style %}
#shopify-section-{{ section.id }} .slider–horizontal {
height: {{ section.settings.size }};
}
@media all and (max-width: 948px) {
#shopify-section-{{ section.id }} .slider–horizontal {
height: calc({{ section.settings.mobile_size }} - {{ navigation_padding }}px);
}
{% if section.blocks.size > 1 %}
#shopify-section-{{ section.id }} {
padding-bottom: 57px;
}
{% endif %}
}
{% endstyle %}
{%- if section.settings.mobile_size != ‘100vh’ -%}
{% style %}
@media all and (max-width: 948px) {
#shopify-section-{{ section.id }} .slider–horizontal {
height: calc({{ section.settings.mobile_size }} - {{ navigation_padding }}px) !important;
}
}
{% endstyle %}
{%- endif -%}
{%- endif -%}
{% schema %}
{
“name”: “t:sections.slider.slider_horizontal.name”,
“class”: “mount-slider mount-css-slider overflow-hidden”,
“max_blocks”: 8,
“settings”: [
{
“type”: “select”,
“id”: “size”,
“label”: “t:sections.slider.settings.desktop_height.label”,
“options”: [
{
“value”: “60vh”,
“label”: “t:sections.slider.settings.desktop_height.options__2.label”
},
{
“value”: “80vh”,
“label”: “t:sections.slider.settings.desktop_height.options__3.label”
},
{
“value”: “100vh”,
“label”: “t:sections.slider.settings.desktop_height.options__4.label”
}
],
“default”: “80vh”
},
{
“type”: “select”,
“id”: “mobile_size”,
“label”: “t:sections.slider.settings.mobile_height.label”,
“options”: [
{
“value”: “40vh”,
“label”: “t:sections.slider.settings.desktop_height.options__1.label”
},
{
“value”: “60vh”,
“label”: “t:sections.slider.settings.desktop_height.options__2.label”
},
{
“value”: “80vh”,
“label”: “t:sections.slider.settings.desktop_height.options__3.label”
},
{
“value”: “100vh”,
“label”: “t:sections.slider.settings.desktop_height.options__4.label”
}
],
“default”: “60vh”
},
{
“type”: “header”,
“content”: “t:sections.slider.settings.text_style.header”
},
{
“type”: “select”,
“id”: “text_size”,
“label”: “t:sections.image-with-text.settings.text_size.label”,
“options”: [
{
“value”: “regular”,
“label”: “t:sections.image-with-text.settings.text_size.options__1.label”
},
{
“value”: “large”,
“label”: “t:sections.image-with-text.settings.text_size.options__2.label”
},
{
“value”: “huge”,
“label”: “t:sections.image-with-text.settings.text_size.options__3.label”
}
],
“default”: “regular”
},
{
“type”: “select”,
“id”: “alignment”,
“label”: “t:sections.image-with-text.settings.text_alignment.label”,
“options”: [
{
“value”: “horizontal-left vertical-top”,
“label”: “t:sections.image-with-text.settings.text_alignment.options__1.label”
},
{
“value”: “horizontal-center vertical-top”,
“label”: “t:sections.image-with-text.settings.text_alignment.options__2.label”
},
{
“value”: “horizontal-right vertical-top”,
“label”: “t:sections.image-with-text.settings.text_alignment.options__3.label”
},
{
“value”: “horizontal-left vertical-middle”,
“label”: “t:sections.image-with-text.settings.text_alignment.options__4.label”
},
{
“value”: “horizontal-center vertical-middle”,
“label”: “t:sections.image-with-text.settings.text_alignment.options__5.label”
},
{
“value”: “horizontal-right vertical-middle”,
“label”: “t:sections.image-with-text.settings.text_alignment.options__6.label”
},
{
“value”: “horizontal-left vertical-bottom”,
“label”: “t:sections.image-with-text.settings.text_alignment.options__7.label”
},
{
“value”: “horizontal-center vertical-bottom”,
“label”: “t:sections.image-with-text.settings.text_alignment.options__8.label”
},
{
“value”: “horizontal-right vertical-bottom”,
“label”: “t:sections.image-with-text.settings.text_alignment.options__9.label”
}
],
“default”: “horizontal-left vertical-bottom”
},
{
“type”: “header”,
“content”: “t:sections.custom-gutter.heading.content”
},
{
“type”: “checkbox”,
“id”: “gutter_enabled”,
“label”: “t:sections.custom-gutter.gutter_enabled.label”
}
],
“blocks”: [
{
“type”: “image”,
“name”: “t:sections.slider.blocks.image.name”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.slider.blocks.image.settings.image.label”
},
{
“type”: “text”,
“id”: “title”,
“label”: “t:sections.slider.blocks.image.settings.heading.label”
},
{
“type”: “text”,
“id”: “subheading”,
“label”: “t:sections.slider.blocks.image.settings.subheading.label”
},
{
“type”: “text”,
“id”: “caption”,
“label”: “Caption”
},
{
“type”: “text”,
“id”: “button_label”,
“label”: “t:sections.slider.blocks.image.settings.button_label.label”
},
{
“type”: “url”,
“id”: “url”,
“label”: “t:sections.slider.blocks.image.settings.link.label”,
“info”: “t:sections.slider.blocks.image.settings.link.info”
},
{
“type”: “header”,
“content”: “t:sections.custom-colors.heading.label”
},
{
“type”: “color”,
“id”: “color_text”,
“label”: “t:sections.custom-colors.text.label”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “color”,
“id”: “color_bg”,
“label”: “t:sections.custom-colors.overlay.label”,
“default”: “rgba(0,0,0,0)”
}
]
}
],
“presets”: [{
“name”: “t:sections.slider.slider_horizontal.name”,
“blocks”: [{
“type”: “image”
},{
“type”: “image”
},{
“type”: “image”
}]
}]
}
{% endschema %}
Hi @Pam9 ,
Please change code here:
Code:
height: {{ section.settings.mobile_size }};
Hope it helps!
Hey @LitCommerce , still looks the same. You mean to replace the code with the one you mentioned?
Hi @Pam9 ,
Yes, or you just need to change all the code:
{%- if section.blocks.size > 0 -%}
{%- liquid
if section.settings.mobile_size == '100vh' and section.blocks.size == 1
assign navigation_padding = 65
else
assign navigation_padding = 120
endif
-%}
{%- endif -%}
{% schema %}
{
"name": "t:sections.slider.slider_horizontal.name",
"class": "mount-slider mount-css-slider overflow-hidden",
"max_blocks": 8,
"settings": [
{
"type": "select",
"id": "size",
"label": "t:sections.slider.settings.desktop_height.label",
"options": [
{
"value": "60vh",
"label": "t:sections.slider.settings.desktop_height.options__2.label"
},
{
"value": "80vh",
"label": "t:sections.slider.settings.desktop_height.options__3.label"
},
{
"value": "100vh",
"label": "t:sections.slider.settings.desktop_height.options__4.label"
}
],
"default": "80vh"
},
{
"type": "select",
"id": "mobile_size",
"label": "t:sections.slider.settings.mobile_height.label",
"options": [
{
"value": "40vh",
"label": "t:sections.slider.settings.desktop_height.options__1.label"
},
{
"value": "60vh",
"label": "t:sections.slider.settings.desktop_height.options__2.label"
},
{
"value": "80vh",
"label": "t:sections.slider.settings.desktop_height.options__3.label"
},
{
"value": "100vh",
"label": "t:sections.slider.settings.desktop_height.options__4.label"
}
],
"default": "60vh"
},
{
"type": "header",
"content": "t:sections.slider.settings.text_style.header"
},
{
"type": "select",
"id": "text_size",
"label": "t:sections.image-with-text.settings.text_size.label",
"options": [
{
"value": "regular",
"label": "t:sections.image-with-text.settings.text_size.options__1.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.settings.text_size.options__2.label"
},
{
"value": "huge",
"label": "t:sections.image-with-text.settings.text_size.options__3.label"
}
],
"default": "regular"
},
{
"type": "select",
"id": "alignment",
"label": "t:sections.image-with-text.settings.text_alignment.label",
"options": [
{
"value": "horizontal-left vertical-top",
"label": "t:sections.image-with-text.settings.text_alignment.options__1.label"
},
{
"value": "horizontal-center vertical-top",
"label": "t:sections.image-with-text.settings.text_alignment.options__2.label"
},
{
"value": "horizontal-right vertical-top",
"label": "t:sections.image-with-text.settings.text_alignment.options__3.label"
},
{
"value": "horizontal-left vertical-middle",
"label": "t:sections.image-with-text.settings.text_alignment.options__4.label"
},
{
"value": "horizontal-center vertical-middle",
"label": "t:sections.image-with-text.settings.text_alignment.options__5.label"
},
{
"value": "horizontal-right vertical-middle",
"label": "t:sections.image-with-text.settings.text_alignment.options__6.label"
},
{
"value": "horizontal-left vertical-bottom",
"label": "t:sections.image-with-text.settings.text_alignment.options__7.label"
},
{
"value": "horizontal-center vertical-bottom",
"label": "t:sections.image-with-text.settings.text_alignment.options__8.label"
},
{
"value": "horizontal-right vertical-bottom",
"label": "t:sections.image-with-text.settings.text_alignment.options__9.label"
}
],
"default": "horizontal-left vertical-bottom"
},
{
"type": "header",
"content": "t:sections.custom-gutter.heading.content"
},
{
"type": "checkbox",
"id": "gutter_enabled",
"label": "t:sections.custom-gutter.gutter_enabled.label"
}
],
"blocks": [
{
"type": "image",
"name": "t:sections.slider.blocks.image.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.slider.blocks.image.settings.image.label"
},
{
"type": "text",
"id": "title",
"label": "t:sections.slider.blocks.image.settings.heading.label"
},
{
"type": "text",
"id": "subheading",
"label": "t:sections.slider.blocks.image.settings.subheading.label"
},
{
"type": "text",
"id": "caption",
"label": "Caption"
},
{
"type": "text",
"id": "button_label",
"label": "t:sections.slider.blocks.image.settings.button_label.label"
},
{
"type": "url",
"id": "url",
"label": "t:sections.slider.blocks.image.settings.link.label",
"info": "t:sections.slider.blocks.image.settings.link.info"
},
{
"type": "header",
"content": "t:sections.custom-colors.heading.label"
},
{
"type": "color",
"id": "color_text",
"label": "t:sections.custom-colors.text.label",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "color_bg",
"label": "t:sections.custom-colors.overlay.label",
"default": "rgba(0,0,0,0)"
}
]
}
],
"presets": [{
"name": "t:sections.slider.slider_horizontal.name",
"blocks": [{
"type": "image"
},{
"type": "image"
},{
"type": "image"
}]
}]
}
{% endschema %}
Hope it helps!
Hey @LitCommerce ,
Nothing changed.
Hi @Pam9 ,
Please change all code:
{%- if section.blocks.size > 0 -%}
{%- liquid
if section.settings.mobile_size == '100vh' and section.blocks.size == 1
assign navigation_padding = 65
else
assign navigation_padding = 120
endif
-%}
{%- endif -%}
{% schema %}
{
"name": "t:sections.slider.slider_horizontal.name",
"class": "mount-slider mount-css-slider overflow-hidden",
"max_blocks": 8,
"settings": [
{
"type": "select",
"id": "size",
"label": "t:sections.slider.settings.desktop_height.label",
"options": [
{
"value": "60vh",
"label": "t:sections.slider.settings.desktop_height.options__2.label"
},
{
"value": "80vh",
"label": "t:sections.slider.settings.desktop_height.options__3.label"
},
{
"value": "100vh",
"label": "t:sections.slider.settings.desktop_height.options__4.label"
}
],
"default": "80vh"
},
{
"type": "select",
"id": "mobile_size",
"label": "t:sections.slider.settings.mobile_height.label",
"options": [
{
"value": "40vh",
"label": "t:sections.slider.settings.desktop_height.options__1.label"
},
{
"value": "60vh",
"label": "t:sections.slider.settings.desktop_height.options__2.label"
},
{
"value": "80vh",
"label": "t:sections.slider.settings.desktop_height.options__3.label"
},
{
"value": "100vh",
"label": "t:sections.slider.settings.desktop_height.options__4.label"
}
],
"default": "60vh"
},
{
"type": "header",
"content": "t:sections.slider.settings.text_style.header"
},
{
"type": "select",
"id": "text_size",
"label": "t:sections.image-with-text.settings.text_size.label",
"options": [
{
"value": "regular",
"label": "t:sections.image-with-text.settings.text_size.options__1.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.settings.text_size.options__2.label"
},
{
"value": "huge",
"label": "t:sections.image-with-text.settings.text_size.options__3.label"
}
],
"default": "regular"
},
{
"type": "select",
"id": "alignment",
"label": "t:sections.image-with-text.settings.text_alignment.label",
"options": [
{
"value": "horizontal-left vertical-top",
"label": "t:sections.image-with-text.settings.text_alignment.options__1.label"
},
{
"value": "horizontal-center vertical-top",
"label": "t:sections.image-with-text.settings.text_alignment.options__2.label"
},
{
"value": "horizontal-right vertical-top",
"label": "t:sections.image-with-text.settings.text_alignment.options__3.label"
},
{
"value": "horizontal-left vertical-middle",
"label": "t:sections.image-with-text.settings.text_alignment.options__4.label"
},
{
"value": "horizontal-center vertical-middle",
"label": "t:sections.image-with-text.settings.text_alignment.options__5.label"
},
{
"value": "horizontal-right vertical-middle",
"label": "t:sections.image-with-text.settings.text_alignment.options__6.label"
},
{
"value": "horizontal-left vertical-bottom",
"label": "t:sections.image-with-text.settings.text_alignment.options__7.label"
},
{
"value": "horizontal-center vertical-bottom",
"label": "t:sections.image-with-text.settings.text_alignment.options__8.label"
},
{
"value": "horizontal-right vertical-bottom",
"label": "t:sections.image-with-text.settings.text_alignment.options__9.label"
}
],
"default": "horizontal-left vertical-bottom"
},
{
"type": "header",
"content": "t:sections.custom-gutter.heading.content"
},
{
"type": "checkbox",
"id": "gutter_enabled",
"label": "t:sections.custom-gutter.gutter_enabled.label"
}
],
"blocks": [
{
"type": "image",
"name": "t:sections.slider.blocks.image.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.slider.blocks.image.settings.image.label"
},
{
"type": "text",
"id": "title",
"label": "t:sections.slider.blocks.image.settings.heading.label"
},
{
"type": "text",
"id": "subheading",
"label": "t:sections.slider.blocks.image.settings.subheading.label"
},
{
"type": "text",
"id": "caption",
"label": "Caption"
},
{
"type": "text",
"id": "button_label",
"label": "t:sections.slider.blocks.image.settings.button_label.label"
},
{
"type": "url",
"id": "url",
"label": "t:sections.slider.blocks.image.settings.link.label",
"info": "t:sections.slider.blocks.image.settings.link.info"
},
{
"type": "header",
"content": "t:sections.custom-colors.heading.label"
},
{
"type": "color",
"id": "color_text",
"label": "t:sections.custom-colors.text.label",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "color_bg",
"label": "t:sections.custom-colors.overlay.label",
"default": "rgba(0,0,0,0)"
}
]
}
],
"presets": [{
"name": "t:sections.slider.slider_horizontal.name",
"blocks": [{
"type": "image"
},{
"type": "image"
},{
"type": "image"
}]
}]
}
{% endschema %}
Hey @LitCommerce ,
I already did and nothing changed