Slideshow images in Brooklyn theme are cropped on mobile.

astellmacher
Tourist
6 0 1

Hi,

I have a slideshow of 5 images that are severely cropped on mobile.

Can this be remedied?

The shop url is https://milwaukeevintagemercantile.com/ 

0 Likes
Olivia
Shopify Staff
Shopify Staff
624 64 119

Hey, @astellmacher!

Welcome to Shopify Community. My name is Olivia and I work here.

I'd love to help you answer this today. While it's always possible to play around with code to adjust the mobile version of your site to make images respond differently, I might not recommend it. Let's chat more about why.

Your theme is specifically built to act this way.

Brooklyn was designed to be mobile-responsive, and is optimized to react appropriately based on any browser or device that opens it. If you make changes to the responsiveness of the theme you risk losing the best possible user experience for your customers across hundreds of devices and several browsers. This is a pretty big implication we take into consideration, which helps us build more user-friendly themes (based on hours of research) for a seamless shopping experience. 

This site is how you communicate with your customers so I definitely understand the need to showcase your chosen images in a certain way. What you can focus on is how to optimize your images and choose the best option while working with slideshow sections. I found this super helpful blog post on combatting image cropping I'd like you to check out for some recommendations. 

There, you'll find we discuss:

  1. Layout options
  2. Image position settings
  3. + Slideshow best practices

I trust that will be helpful, but please let me know if other questions come up.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes

@astellmacher 

The first thing that I notice is your text going off screen. 

diego_ezfy_0-1610157695066.png

 

Let's get that fixed first and foremost.

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

 

[id] .custom-content [data-section-type] *{
max-width: 100% !important;
width: 100% !important;
}

 

It will look like this after the code is implemented:

diego_ezfy_0-1610158117938.png


Much better!

Now, the slider issue is a more complex issue, not unknown nor rare though, unfortunately. 

Because of work my free time towards the community is quite restricted so I can't promise I will manage to come up with a solution for you soon enough.
I am sure someone around will get it fixed for you asap though!


Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
astellmacher
Tourist
6 0 1

Thank you so much! I have applied your suggested code to my text! 

IamLLIIME
Trailblazer
171 1 41

Hi sir! Can you also help me with my problem?

 

@diego_ezfy 

0 Likes