slideShow section : dawn

Technical Q&A
,

Topic summary

A user is experiencing issues with slideshow banner dimensions on their Shopify store (zisthi.com), specifically noting that the full image doesn’t display properly in mobile view—most content gets cropped.

Proposed Solution:
Another participant provided CSS code to address the mobile display issue, suggesting:

  • Setting .slideshow-container to width: 100% and height: auto for automatic scaling
  • Using object-fit: cover on images to prevent distortion while ensuring full container coverage
  • Adding a media query for screens up to 767px width with adjusted height values (50vh suggested)

Current Status:
The original poster reported that the suggested CSS solution is not working. The issue remains unresolved, with no follow-up troubleshooting steps provided yet.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

hello,
How can fix the slideshow banner height and width,
actually mobile view not show full image,
check this,
https://www.zisthi.com/collections/earrings
banner height, crop the most of content in mobile views

Sohan2198_0-1725654266836.png
Sohan2198_0-1725654266836.png528×451 80.4 KB

Url:https://www.zisthi.com/
pass:Zisthi0206

2

Hi,

Hope following will help

Adjust CSS for Mobile View

CSS example

.slideshow-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto; /* Adjusts height automatically */
}

.slideshow-container img {
    width: 100%;
    height: auto; /* Ensures the image scales correctly */
    object-fit: cover; /* Prevents image distortion while covering the container */
}

@media (max-width: 767px) {
    .slideshow-container {
        height: 50vh; /* Adjust this value to fit your needs */
    }

    .slideshow-container img {
        height: 100%;
        object-fit: cover; /* Ensures the image covers the container without distortion */
    }
}

Add or Modify CSS Rules (theme.css or styles.css)

Adjust theme setting

3

not working