Hello, my problem is that the slide show at the top of my home screen takes priority over the content below it by hiding that content until you scroll down. I want the top of “our sustainable products” to be visible as soon as you reach the site. This is only a problem on mobile view.
Topic summary
A user encountered an issue where their homepage slideshow was hiding content below it on mobile view. The “Our Sustainable Products” section wasn’t visible until users scrolled, despite being within the viewport.
Proposed Solution:
Another user suggested adding CSS code to component-slideshow.css to limit the slideshow’s max-height to 600px. However, this didn’t address the actual problem.
Clarification:
The issue wasn’t about slideshow dimensions, but rather that content below wouldn’t display until the screen was interacted with (scrolled) on mobile devices.
Resolution:
The original poster resolved the issue independently by making unspecified design changes. The thread is now closed with the problem solved, though the specific solution wasn’t shared.
Hi @Ced74 , to do that, please follow these steps:
Step 1: Open Online Store → Themes → Edit code.
Step 2: Find component-slideshow.css file
Step 3: Paste this code at the bottom of the file
slideshow-component {
max-height: 600px;
}
slideshow-component .slideshow__slide {
max-height: 600px;
}
Result:
If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you ![]()
The problem is not that the slide show is a bad size, it’s that there is some setting so the text below it does not show until you interact with the screen by scrolling (on mobile view). The text below should be visible because that section is in-screen, it just doesn’t load in until you interact with the screen.
Never mind, I changed some things about my design which fixed the problem
