All things Shopify and commerce
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
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!
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 -%}
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?
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
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.
I know, that's why I added code that allows me to upload different images for mobile view only.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024