Spacing for hero slideshow section on Effortless theme, specially on mobile view

[luis-zadel]

Hello,

I'm having some hard time adjusting the spacing between the text and button elements of several hero slideshow sections. On the desktop view I'm not so displeased though I would be happier if I could reduce the spacing a bit, evenly between the heading, text and button, as shown here:

Much more critical though is the result displayed on the mobile version, where the elements fall on top of the hero image, as shown on these three phone screens displayed side by side:

I'm sharing a preview link of the in-work version of the store, as this version is still unpublished, https://8y96ft8gmxvfubd9-62414225581.shopifypreview.com. If the link expires please ask me to provide a new one.

Help will be greatly appreciated. Best regards

[akshay_bhatt]

Hi @luis-zadel ,

To fix spacing issues in your hero slideshow:

Add this CSS:

/* Desktop spacing */
.hero-slideshow-section .hero__text {
  margin-bottom: 20px;
}
.hero-slideshow-section .hero__button {
  margin-top: 15px;
}

/* Mobile adjustments */
@media screen and (max-width: 767px) {
  .hero-slideshow-section {
    padding: 20px 10px;
    text-align: center;
  }
  .hero-slideshow-section .hero__text,
  .hero-slideshow-section .hero__button {
    margin-bottom: 10px;
  }
  .hero-slideshow-section .hero__heading {
    font-size: 20px;
    line-height: 1.4;
  }
}

Key Changes:

• Reduced spacing for better balance on desktop.
• On mobile, added padding and reduced margins to avoid overlap with the hero image.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt