Images don't resize when screen is smaller

calliestober
Tourist
13 0 3

When my site is full screen on a desktop, the images are the correct size. When I make the screen smaller, the images don't get smaller with the screen. Instead, they get cut off.

Thank you!

0 Likes
Tira
Shopify Staff
Shopify Staff
1102 74 179

Hey, calliestober.

Tira here to help. 

Thanks for reaching out and welcome to the Shopify Community. I would love to take a look at this for you.  It sounds like your images don’t resize when you adjust your browser’s window on your desktop. 

Does this happen on a specific page? Do you have a link that I could use to replicate this? 

Sometimes this can happen because of the browser you’re using to resize your windows. Here’s a list of compatible browsers with Shopify: Supported Browsers. Can you please try these browsers and let me know if the issue still persists?

Tira | 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
calliestober
Tourist
13 0 3

It happens on my home page. I am using a supported browser. My site is https://calibluedesigns.com/

 

 

0 Likes
Tira
Shopify Staff
Shopify Staff
1102 74 179

Thanks for the reply and for passing along your store URL. 

I’m not able to see your store as there is a password page. If you’d like, you can disable the password page so that I can take a look, by following the steps listed in our help centre here: Remove the password page. When I’ve finished taking a look, you can enable it again by following the instructions listed in our help doc here: Add a password page.

If you don’t want to do that, I can provide you with general advice. From what I’ve seen, some themes have the slideshow cropped on both sides when resized to a smaller size in a window. This is expected behaviour with free Shopify themes, to make sure the interface of the store is optimized for viewing. The theme is designed to make your site be responsive and the image container will change depending on the size of the screen it’s loaded on, I would recommend editing the existing image to some different sizes to include or remove whitespace, to see if you can get the look you’re after. 

Check out this blog post on combatting slideshow cropping: How to Combat Image Cropping on Shopify Slideshow Sections that covers layout options, image position settings and slideshow best practices. 

We also have a great video on Slideshow image best practices that might help: Shopify Themes: Slideshow best practices

Talk soon,

Tira | 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
calliestober
Tourist
13 0 3

I have removed the password, sorry about that! I am still confused on how to fix this problem.

0 Likes
Tira
Shopify Staff
Shopify Staff
1102 74 179

Thanks for removing your password page, @calliestober.

I’ve taken a look at your store and I can see you have some full-width images that display fully when on desktop, but when I make my screen smaller, it does crop the images on the sides, showing only part of the image like this: 

21-01-z8vxg-o5vcz

It looks like you’re using the Debut theme, this is an expected behaviour where the images will crop the sides when resized, to help optimize your theme and images for better viewing on various devices. If an image were to retain its size when viewed on a smaller screen, you would see a lot of white space at the top and bottom of the image, which may not look great on someone’s screen. Adjusting this would be outside our scope of support. 

I can see that there is text on your images that are cropped. We typically don’t recommend adding text to your images because of the likelihood of being cropped on screen sizes and the image file cannot be read by screen readers (used for accessibility) so they cannot contribute to your search engine optimization (SEO). If you want to add text to your images, I recommend using the “Image with Overlay Text” section in your theme. This allows you to add an image, and then add text with our theme editor. Check out the steps to add this through our help doc here: Add an image with text overlay to your homepage.

Another option is to check your theme’s settings for different sizing options. There are some themes, like Debut and Brooklyn that include an option to “Adapt to image" which helps to show more of the image on smaller screens and devices by setting the height of the section to adapt to the height of the image.

To check this setting off you can follow these steps:

1) Login to your Shopify admin

2) Click on “Online Store > Themes” 

3) Click on the “Customize” button next to the name of theme you would like to edit

4) Click on the “Image with Text Overlay” section that you created earlier, and find the dropdown that says, “Section height” - click on the dropdown menu and choose “Adapt to image” like this:

21-01-wwa92-f3wz2

5) Then click on the “Save” button located at the top right to save your changes. You should be able to resize your storefront window and see your image adapt to the size of the first image.

Let me know if this helps you accomplish this. 

Tira | 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
calliestober
Tourist
13 0 3

Hello Tira,

This section is actually a gallery, not an image with text overlay. The "adapt to image" doesn't seem to be an option for gallery, is there something else I could try? Sorry for the confusion!

0 Likes
Tira
Shopify Staff
Shopify Staff
1102 74 179

Thanks for letting me know you’re using a gallery, @calliestober. That’s correct, the only options you can see in a gallery are to add an image, image alignment, link and caption. There is no option to adjust the section height. I just tried to replicate this by adding a gallery to my test store, and when I make my window smaller in size, I see the photos in my gallery resizing down like this:

21-01-mveeo-yhacb

If your gallery isn’t appearing in a similar way, I would love to take a look at your store to take a further look and bring it up to our design team to look at if required. 

To make it easier for you, I have gone ahead and sent an email to the email address listed in your Shopify Community profile. Can you please take a look at your inbox? 

Once I’ve received a reply on your email, I can check out your store.

Talk soon,

Tira | 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