Full Width Fade Slideshow

Store Design

Topic summary

Issue: The homepage fade slideshow image is not truly full-width; a thin white margin appears on both sides, unlike the adjacent blog component which spans edge-to-edge. Site link and a screenshot were provided to illustrate the gap.

Initial view: One responder suggested the white sliver might be the browser scrollbar and advised hiding it, but the original poster clarified the margins appear on both sides of the slideshow and are not the scrollbar.

Proposed fix: Edit the theme CSS (section-featured.blog.css) by adding a mobile media query that sets .blog__posts.articles-wrapper { column-gap: 20px; } for max-width: 749px. This change was intended to address spacing in the blog section, not the slideshow, and did not resolve the issue.

Current status: The helper cannot reproduce the white space on their screen and requested an updated screenshot after the changes. The problem remains unresolved.

Notes: The attached image and live site are central to diagnosing the layout behavior; no confirmed root cause or final solution yet.

Summarized with AI on December 19. AI used: gpt-5.
1

Hi! I’m having trouble getting my fade slideshow image to fill the entire width of the screen. There’s always a little sliver of white on each side of the screen. Does anybody know how I can fix this, please, as it’s really bugging me? :sweat_smile:

My website is www.shophannahlou.com and it’s the slideshow image that says Latest Articles on it on the homepage.

HannahLouSlideshow.jpg
HannahLouSlideshow.jpg2880×1573 171 KB

Thanks!

2

Hello @hannahlou

That’s the scrollbar. If you want to hide it. but it may confuse users. So that won’t be any kind of trouble.

3

Hi! I don’t think it’s the scrollbar as it’s on either side of the fade slideshow. As you can see, the fade slideshow joins on to the blog component which is full-width, but the slideshow is a few mm off on each side :thinking:

4

Just follow below mentioned steps to fix this.

  1. Go to admin > Online store > edit code of theme.

  2. In code directory, find the file named “section-featured.blog.css” and open the file.

  3. Copy below given code and paste this code at the end of above mentioned file.

@media (max-width: 749px) {
  .blog__posts.articles-wrapper {
    column-gap: 20px;
  }
}
  1. Don’t forget to save the file after making changes.

Hope this works best for your issue.

You can contact anytime, Just DM !

5

Thank you! It didn’t work, unfortunately :pensive_face:

6

On my window, i can’t see any white space on both edges of section.
Can you please provide the actual screenshot after making changes ?