Is it possible to make this banner responsive?

[arbeygp]

Hello guys,

I have tried to make this banner responsive, but I can’t do it, I want it to adapt to all desktop screens.

This is my site,

https://eltemplodelamoda.com/

It is the principal slideshow ,

It doesn’t fit all screens, I don’t know what to do anymore and I don’t want to change the template because of it.

Thank you guys

[ExpertRookie]

Hi @arbeygp
To make the slider responsive on all devices and adaptive with your images.
You need to use the images have the same size, then set height for the slider base on your images size.

[eason_feng]

Hi, I’ve checked your store and it seems that the hight of the banner is having some problem, causing the picture to show partically when the screen is wider. I suggest to remove the fixed height value in below css. Here is a screenshot for your reference, I hope it will help to resolve the issue.

[arbeygp]

@eason_feng @ExpertRookie

Hi guys , this is the slideshow code:

{%- capture slideShowSec -%}

{% if section.blocks.size > 0 %}

{% for block in section.blocks %}

{% if block.settings.link != blank %}{% endif %}

{% if block.settings.image == blank %}

{% capture current %}{% cycle 1, 2 %}{% endcapture %}{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}

{% else %}

{% if block.settings.mb_image != blank %}

{% endif %} {% endif %}

{% unless block.settings.smalltitle == blank %}

{{ block.settings.smalltitle }}

{% endunless %}

{% unless block.settings.title == blank %}

{{ block.settings.title }}

{% endunless %}

{% unless block.settings.subheading == blank %}
{{ block.settings.subheading }}
{% endunless %}

{% unless block.settings.slide_button_text == blank %}
{{ block.settings.slide_button_text }}
{% endunless %}

{% if block.settings.link != blank %}{% endif %}

{% endfor %}

{% endif %} {% if section.blocks.size == 0 %}

{{ 'homepage.onboarding.no_content' | t }}

{% endif %}

#Slideshow-{{section.id}} { height:{{section.settings.ds_height}}px; }
@media only screen and (min-width:768px) and (max-width: 2560px) { #Slideshow-{{section.id}} { height:{{section.settings.tb_height}}px; } }
@media only screen and (max-width:767px) { #Slideshow-{{section.id}} { height:{{section.settings.mb_height}}px; } }

{%- for block in section.blocks -%}
.heading1-{{block.id}} { color:{{ block.settings.heading1}};}
.heading2-{{block.id}} { color:{{ block.settings.heading2}};}
.heading3-{{block.id}} { color:{{ block.settings.heading3}};}
{%- endfor -%}

{%- endcapture -%}
{{slideShowSec | strip_newlines | remove: " " | remove: " " }}

{% schema %}
{
“name”: “Slideshow”,
“class”: “index-section index-section–flush slideshowOuter”,
“max_blocks”: 6,
“settings”: [
{
“type”: “paragraph”,
“content”: "Set font size and other options from → Theme Settings → Fonts, Colors and Styles → Slideshow "
},
{
“type”: “paragraph”,
“content”: “–”
},
{
“type”:“checkbox”,
“id”:“section_width”,
“label”:“Box Width?”,
“default”: false
},
{
“type”: “range”,
“id”: “box-width”,
“label”:“Select Box Width”,
“default”: 1500,
“min”: 1200,
“max”: 2200,
“step”: 100,
“unit”: “px”
},
{
“type”: “select”,
“id”: “top-offeset”,
“label”: “Top OffSet”,
“default”: “default”,
“options”: [
{
“value”: “default”,
“label”: “Default”
},
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “none”,
“label”: “None”
}
]
},
{
“type”:“checkbox”,
“id”:“snow_effect”,
“label”:“Enable Snow Effect?”,
“default”: false,
“info”:“For Christmas”
},
{
“type”: “select”,
“id”: “snow_style”,
“label”: “Snow Style”,
“default”: “style1”,
“options”: [
{
“value”: “style1”,
“label”: “Falling Down”
},
{
“value”: “style2”,
“label”: “Falling From Left”
}
]
},
{
“type”: “checkbox”,
“id”: “autoplay”,
“label”: “Auto-rotate slides”,
“default”: true
},
{
“type”: “select”,
“id”: “autoplay_speed”,
“label”: “Change Slides Every”,
“options”: [
{ “value”: “5000”, “label”: “5 seconds” },
{ “value”: “6000”, “label”: “6 seconds” },
{ “value”: “7000”, “label”: “7 seconds” },
{ “value”: “8000”, “label”: “8 seconds” },
{ “value”: “9000”, “label”: “9 seconds” },
{ “value”: “10000”, “label”: “10 seconds” },
{ “value”: “12000”, “label”: “12 seconds” },
{ “value”: “15000”, “label”: “15 seconds” }
],
“default”: “7000”
},
{
“type”: “checkbox”,
“id”: “arrow”,
“label”: “Show Next/Previous Arrows?”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “dots”,
“label”: “Show Dotted Navigation?”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “txtanimation”,
“label”: “Enable Text Animation”,
“default”: false
},
{
“type”: “select”,
“id”: “animation-style”,
“label”: “Text Animation Style”,
“default”: “style1”,
“options”: [
{
“label”: “Style1”,
“value”: “style1”
},
{
“label”: “Style2”,
“value”: “style2”
},
{
“label”: “Style3”,
“value”: “style3”
}
]
},
{
“type”: “select”,
“id”: “text-align”,
“label”: “Text Alignment”,
“default”: “default”,
“options”: [
{
“label”: “Default”,
“value”: “default”
},
{
“label”: “Center”,
“value”: “center”
}
]
},
{
“type”:“paragraph”,
“content”:“Section Height ===”
},
{
“type”: “range”,
“id”: “ds_height”,
“label”: “Desktop”,
“default”: 500,
“min”: 200,
“max”: 1000,
“step”: 10
},
{
“type”: “range”,
“id”: “tb_height”,
“label”: “Tablet”,
“default”: 350,
“min”: 200,
“max”: 1000,
“step”: 10
},
{
“type”: “range”,
“id”: “mb_height”,
“label”: “Mobile”,
“default”: 250,
“min”: 100,
“max”: 800,
“step”: 10
},
{
“type”:“paragraph”,
“content”:“For Best Resolution recommended image width: 1920px for Desktop & 760px for Mobile. Image height should be as per your selections above.”
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Image slide”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “image_picker”,
“id”: “mb_image”,
“label”: “Mobile Image”,
“info”: “Do not select image here if want to display same image for mobile and desktop”
},
{
“type”: “select”,
“id”: “alignment”,
“label”: “Image Alignment”,
“default”: “top”,
“options”: [
{ “value”: “top”, “label”: “Top” },
{ “value”: “center”, “label”: “Middle” },
{ “value”: “bottom”, “label”: “Bottom” }
]
},
{
“type”: “text”,
“id”: “smalltitle”,
“label”: “Heading 1”,
“default”: “Small Heading”
},
{
“type”: “color”,
“id”: “heading1”,
“label”: “Color”,
“default”: “#000”
},
{
“type”: “textarea”,
“id”: “title”,
“label”: “Heading 2”,
“default”: “Large Heading”,
“info”:“Use your text here to make headings bold”
},
{
“type”: “color”,
“id”: “heading2”,
“label”: “Color”,
“default”: “#000”
},
{
“type”: “textarea”,
“id”: “subheading”,
“label”: “Heading 3”,
“default”: “Tell your brand’s story”,
“info”: “Details will be show only in large screen.”
},
{
“type”: “color”,
“id”: “heading3”,
“label”: “Color”,
“default”: “#000”
},
{
“type”: “text”,
“id”: “slide_button_text”,
“label”: “Slide Button Text”,
“default”:“Shop now”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Slide Link”
},
{
“type”: “checkbox”,
“id”: “newTab”,
“label”: “Open in new Tab?”,
“info”:“On click link open in new window”
},
{
“type”: “select”,
“id”: “text_align”,
“label”: “Text Position”,
“default”: “left”,
“info”: “Text position work only in large screen”,
“options”: [
{ “label”: “Left”, “value”: “left” },
{ “label”: “Left Bottom”, “value”: “leftbottom” },
{ “label”: “Top Center”, “value”: “topcenter” },
{ “label”: “Center”, “value”: “center” },
{ “label”: “Bottom Center”, “value”: “bottomcenter” },
{ “label”: “Right Bottom”, “value”: “rightbottom” },
{ “label”: “Right”, “value”: “right” }
]
}
]
}
],
“presets”: [{
“name”: “Slideshow”,
“category”: “3. Banners”,
“settings”: {
“autoplay”: true,
“autoplay_speed”: “7000”
},
“blocks”: [
{
“type”: “image”
},
{
“type”: “image”
}
]
}]
}
{% endschema %}

[ExpertRookie]

Hi @arbeygp
Did you make the images have the same size???

[arbeygp]

@ExpertRookie yes, all of them have the same size, 2560 * 692 px o desktop, and 800 * 800 px on mobile

[ExpertRookie]

Hi @arbeygp
you can try this code

#Slideshow-1551272048529 {
height: 27vw!Important;
}
@media(max-width: 766px){
#Slideshow-1551272048529 {
height: 100vw!Important;
}
}

[arbeygp]

@ExpertRookie bro it works perfectly, thanks a lot.