FROM CACHE - en_header
Promotion image
Solved

How can I prevent images from stretching in a website slideshow?

bmdms
Tourist
10 0 1
‎10-27-2020 04:01 PM

Hello,

I have a slideshow on my website, but, when the width of the screen changes, such as, a smaller/larger tab or a different device's screen, the images stretch/shrink horizontally.  How can I prevent this and preserve the dimensions of the photos?

Thanks in advance

Screenshots:

bmdms_0-1603828826964.png

 

bmdms_1-1603828852328.png

 

Labels:
1,800 Views
0 Likes
Report
Accepted Solution (1)
In response to bmdms

Hardik29418
Shopify Partner
2913 419 1084
‎10-31-2020 12:10 AM

This is an accepted solution.

Please place this code at the end of file where the code is written for that content. the file may be Section -> hero-slider.liquid.

Because it is overwriting my code

paramSoft_0-1604117391823.png

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

1,708 Views
2 Likes
Report
Replies 9 (9)

Hardik29418
Shopify Partner
2913 419 1084
‎10-28-2020 01:50 AM

Please provide website url and if your store is password protected then also provide password

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
1,784 Views
1 Like
Report
In response to Hardik29418

bmdms
Tourist
10 0 1
‎10-28-2020 10:24 AM

Here is the website

 

myhoneycreations.com

1,772 Views
0 Likes
Report
In response to bmdms

Hardik29418
Shopify Partner
2913 419 1084
‎10-29-2020 03:17 AM

Please place this code at the end of theme.scss

.home-slideshow .slick-slide img {
height: unset !important;
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
1,753 Views
0 Likes
Report
In response to Hardik29418

bmdms
Tourist
10 0 1
‎10-29-2020 01:09 PM

There is no themes.scss file for this website. Do you know where I should put it?

1,747 Views
0 Likes
Report
In response to bmdms

Hardik29418
Shopify Partner
2913 419 1084
‎10-30-2020 02:22 AM

please place this code in theme.liquid in betweeb <head></head> Like
<style>

// my given code here

</style>

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
1,735 Views
1 Like
Report
In response to Hardik29418

bmdms
Tourist
10 0 1
‎10-30-2020 12:07 PM

Hmm, it still looks like the slideshow, thus the images, are still being stretch based on width of window.

1,730 Views
0 Likes
Report
In response to bmdms

Hardik29418
Shopify Partner
2913 419 1084
‎10-31-2020 12:10 AM

This is an accepted solution.

Please place this code at the end of file where the code is written for that content. the file may be Section -> hero-slider.liquid.

Because it is overwriting my code

paramSoft_0-1604117391823.png

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
1,709 Views
2 Likes
Report
In response to Hardik29418

bmdms
Tourist
10 0 1
‎11-02-2020 10:05 AM

Awesome! It worked. Thank you so much.

 

Could you explain what the code does? Does it just lock the height of the img?

1,694 Views
0 Likes
Report
In response to bmdms

Hardik29418
Shopify Partner
2913 419 1084
‎11-02-2020 08:58 PM

I just set the height to under where before height was fixed so that images were streched.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
1,687 Views
2 Likes
Report

Community Blog Articles

Image 3 - Header image 16_9 V1@2x.png
A guide to Shopify POS Launch and Operations success

Are you ready to take your business to the next level? Look no further than the latest ...

By SarahF_Shopify Apr 15, 2024
JasonH_0-1712162359820.png
Community Connect: Recap March 24’

We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...

By JasonH Apr 8, 2024
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World logo displayed above.
Shopify Store Design: Expert Advice from Stephen’s World

Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...

By JasonH Mar 18, 2024
Terms of Service Privacy Policy