when setting up the announcement bar for a slide show, the mobile view becomes very high. The font size stays the same, just the space between top and bottom is huge, how can I control it?
This only happens when set on slide show and only on the mobile (on desktop it’s fine).
Topic summary
A user encountered excessive vertical spacing in their Dawn theme announcement bar when using slideshow mode with multiple announcements on mobile devices. The issue only occurred with 2+ announcements in slideshow format, not with a single announcement or on desktop view.
Attempted Solutions:
- Initial CSS suggestions targeting
.announcement-barpadding and height didn’t resolve the issue - Multiple users offered to help diagnose the problem
Working Solution:
Adding custom CSS to the announcement bar section fixed the spacing:
.slideshow__slide { height: auto !important; }
Resolution: The user confirmed this CSS code successfully eliminated the excessive vertical spacing on mobile. The issue was specific to the slideshow slide container height not adapting properly to mobile viewports.
1 Like
This issue is usually caused by CSS styling that doesn’t adapt well to mobile view when using a slideshow in the announcement bar, The extra space is likely due to padding or height settings.
Here’s how to fix it:
1. Use Custom CSS (if your theme allows it)
Add this CSS to your theme’s custom CSS section:
@media only screen and (max-width: 768px) {
.announcement-bar {
padding-top: 5px !important;
padding-bottom: 5px !important;
height: auto !important;
}
.announcement-bar .slideshow-slide {
margin: 0 !important;
padding: 0 !important;
}
}
> This reduces the vertical spacing on mobile only and resets unnecessary margins/padding
2. Check Theme Settings (if no CSS access)
- Go to Online Store > Themes > Customize
- Open the announcement bar settings
- Look for padding or spacing settings reduce top and bottom padding
- Preview in mobile view
3. If using a third party app for the announcement slideshow:
Hi @RazHarel
Could you share the link to your store?
Hello! Thank you for reaching out. It sounds like the spacing issue on mobile is related to how the slideshow’s layout is optimized for smaller screens. To better control the space between the top and bottom of your announcement bar in mobile view, I recommend adjusting the padding or margin settings specifically for mobile devices within your theme’s customization options or CSS.
If you’d like, I can guide you through the exact steps or provide custom CSS to help fine-tune the spacing. Feel free to share your store link or let me know how I can assist further—I’m here to help ensure your site looks perfect on all devices!
Thank you for the reply. This didn’t make a difference unfortunetly.
When the announcement bar is set on 1 announcement, It displayes fine. Only when I add a 2nd and 3rd announcement, making it a slideshow, that’s when the vertical spaces (top and bottom) become huge.
Hi, the site is: suavekimonos.com
At the moment it is set on 1 announcement so it displays correctly with no spaces. It’s only when I add other announcement to the ‘slideshow’ style feature, that the vertical framing changes (on mobile only).
Please add other so I can check
I just added 2 other announcements. Please check. Thank you.
This sounds right. I would love help to reduce the space. Thank you.
I just added 2 other announcements. Please check. Thank you.
Please add this code to Custom CSS of your announcement bar to solve the issue.
.slideshow__slide { height: auto !important; }
1 Like
Yes! Fixed it! Legend. Thank you!
Happy I could help!!
1 Like