How can I make slideshow images adapt properly on mobile?

[lightwork]

I added code to give me the option of adding specific images for mobile only, within the slideshow. I have to select "adapt to first image" in the slideshow settings so my images aren't cut off in desktop/widescreen view. But when I do this it also changes the size of the mobile image to match the width of the desktop image; so it is taking my square mobile images and cutting the top/bottom off to make them fit within a rectangle shape. 

My site is www.inspirelightwork.com

would be so grateful for help with this

[lightwork]

Thank you! I am using the free version of the Brooklyn theme. I am just trying to change the slide images in mobile view only (so it will be larger on mobile view.) It's the same images, just resized to fit within a square. I've already uploaded them, I just need help stopping it from cropping those photos in mobile view.

I hope that made sense, it was a bit challenging to express!

[lightwork]

I feel like my issue is within this part of code but I'm not sure

<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% elsif block.settings.image != blank and block.settings.mb_image == blank %} show-desktop-image{% else %} desktop-img{% endif %}">
{%- if block.settings.image -%}
{%- assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round -%}
{{ block.settings.image | image_url: width: 3840 | image_tag:
loading: 'lazy',
height: height,
sizes: "100vw",
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
}}
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
</div>
<div class="slideshow__media banner__media media{% if block.settings.mb_image != blank %} mb-img{% endif %}">
{%- if block.settings.mb_image -%}
{%- assign height = block.settings.mb_image.width | divided_by: block.settings.mb_image.aspect_ratio | round -%}
{{ block.settings.mb_image | image_url: width: 3840 | image_tag:
loading: 'lazy',
height: height,
sizes: "100vw",
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
}}
{%- endif -%}

[Alex520]

Just a guess from looking at your website. Might look into if you have set a fixed height where it is preventing it from expanding for mobile.

I'm guessing you looking for it look like this in your slideshow for mobile?

[lightwork]

Yes that's exactly what I would like for the mobile view to look like!

I am not proficient in coding but I have been scouring it trying to find where that could be.

It has to be where the "adjust to first image size" option is

[Alex520]

I believe that theme has retired from the theme store (2.0) and I am not able to reproduce the theme to help. I think you may still run into trouble if you make it a square. As your desktop view will look too big.

[lightwork]

I know, that's why I added code that allows me to upload different images for mobile view only.