Hello everyone, could someone please assist me in adjusting the slideshow image to fit the content on both mobile and desktop devices? Thank you.
password: Hera
section code
{% for block in section.blocks %}
{% if block.settings.mobile_image != blank %}
{% endif %}
{% if section.settings.overlay %}
{% endif %}
{% if block.settings.subtitle != blank %}
### {{ block.settings.subtitle }}
{% endif %}
{% if block.settings.title != blank %}
## {{ block.settings.title }}
{% endif %}
{% if block.settings.btnlink != blank or block.settings.btntext != blank %}
{{ block.settings.btntext }}
{% endif %}
{% endfor %}
{% style %}
.flickity-overlay .flickity-title, .flickity-overlay .flickity-subtitle {
color: {{ section.settings.textcolor }};
}
.flickity-slideshow .flickity-button-icon {
color: {{ section.settings.navigation_color }};
}
.flickity-btn {
border: 2px solid {{ section.settings.btnbgcolor }};
color: {{ section.settings.btncolor }} !important;
}
.flickity-btn:hover {
background-color: {{ section.settings.btnbgcolor }};
}
{% if section.settings.auto %}
.flickity-slideshow .carousel-cell {
transition: 0.1s ease;
}
.flickity-slideshow .carousel-cell img {
transition: 0.1s ease;
}
{% endif %}
{% endstyle %}
{% schema %}
{
"name": "Flickity slideshow",
"settings": [
{
"type": "checkbox",
"id": "overlay",
"label": "Enable dark overlay",
"default": true
},
{
"type": "checkbox",
"id": "loop",
"label": "Enable loop",
"default": true
},
{
"type": "checkbox",
"id": "fade",
"label": "Enable fade effect",
"default": true
},
{
"type": "checkbox",
"id": "auto",
"label": "Enable autoplay",
"default": true
},
{
"type": "range",
"id": "range",
"label": "Autoplay seconds",
"min": 3,
"max": 6,
"step": 1,
"default": 3
},
{
"type": "color",
"id": "textcolor",
"label": "Change color of the titles"
},
{
"type": "color",
"id": "navigation_color",
"label": "Change color of the navigation arrows"
},
{
"type": "color",
"id": "btnbgcolor",
"label": "Your button background hover color"
},
{
"type": "color",
"id": "btncolor",
"label": "Your button text color"
}
] ,
"blocks": [
{
"type": "card",
"name": "Hero Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Your slideshow image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Your slideshow mobile image"
},
{
"type": "text",
"id": "title",
"label": "Your title"
},
{
"type": "text",
"id": "subtitle",
"label": "Your subtitle"
},
{
"type": "text",
"id": "btntext",
"label": "Your button text"
},
{
"type": "url",
"id": "btnlink",
"label": "Your button link"
}
]
}
] ,
"presets": [
{
"name": "Flickity slideshow",
"category":"Custom"
}
]
}
{% endschema %}