How can I adjust mobile banner text size and placement for my online store?

Store Design
,

Topic summary

A non-developer user is struggling to adjust the text size and positioning of their mobile banner. On desktop, the banner displays correctly, but on mobile devices the text stays in the upper top area and covers the image.

Solution Provided:
Another user shared CSS code to customize mobile banner appearance:

  • Adjust .swiper-slide .sf__slide-content top value to control vertical text position
  • Modify .swiper-slide.sf__mobile-button font-size for first paragraph text
  • Change .swiper-slide.leading-snug font-size for second paragraph text
  • All changes should be added to a CSS chunk with @media (max-width: 767px) wrapper

Current Status:
The original poster implemented the code but reports seeing no visible changes (screenshot provided). The issue remains unresolved and may require further troubleshooting of the CSS implementation or theme-specific adjustments.

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

Hey team,

I’m no developer so I find myself struggling with fine-tuning my website. Simpler stuff I can manage, but I’m having trouble optimising my store for mobile use. Right now I can’t seem to change how the text on the mobile banner looks like or where it sits, no matter what I press on the user interface available to me. The desktop looks fine but when it’s on mobile, my text stays in the upper top and covers the image. What can I do to change how big my text is, and where it gets displayed on my mobile banner?

Website is: selectsundays.co.nz

Thanks!

2 
@media (max-width: 767px){
/* Change the value of top to set the distance of your text from the top. */
.swiper-slide .sf__slide-content {
    top: 50px !important; 
}
/* Change the font-size value to set the font size of your first paragraph of text. */
.swiper-slide .leading-snug{
font-size:1.8rem !important;
}
/* Change the font-size value to set the font size of your second paragraph of text. */
.swiper-slide .sf__mobile-button{
font-size:12px !important;
}
}

put that in chunk.css

3

Thanks!

It’s in now, see screenshot. But I can’t see any changes.

Screen Shot 2023-02-06 at 4.53.25 PM.png
Screen Shot 2023-02-06 at 4.53.25 PM.png2880×1800 545 KB