Refresh theme, move slideshow text higher

Store Design

Topic summary

A user seeks help moving slideshow text higher on their Shopify store using the Refresh theme.

Solutions Provided:

  • Solution 1 (BSSCommerce-HDL): Add CSS to base.css/theme.css targeting .slideshow__text.slideshow__text--left with padding-top: 5px !important within a media query for screens min-width 750px.

  • Solution 2 (Kushagra0602): Modify section-image-banner.css by adding CSS to .banner__heading adjusting font-size and margin-bottom.

  • Solution 3 (ZestardTech): Add CSS to base.css targeting .banner__box with padding adjustments (2rem 3.5rem).

Outcome:

The original poster confirmed that Solution 3 worked successfully, allowing them to adjust padding values (changing the 5px) to fit their needs. Solution 2 did not work for them. The discussion appears resolved with a working customization in place.

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

Dear all,

I would like to move the text that appears on my page’s slideshow a little bit higher. Can anyone help me figure out how to do that through coding? (coding newby here)

my site : arvernefamily.com

password : skiyow

Thank you in advance for your kind help

Capture d'écran 2024-05-24 095030.png
Capture d'écran 2024-05-24 095030.png1860×874 249 KB

1 Like
2

Hi @Isa10 ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSTechVenture_0-1716537602073.png
BSSTechVenture_0-1716537602073.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_1-1716537606543.png
BSSTechVenture_1-1716537606543.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (min-width: 750px) {
    .slideshow__text.slideshow__text--left {
        padding-top: 5px !important;
    }
}

Here is result:

BSSTechVenture_2-1716537642743.png
BSSTechVenture_2-1716537642743.png1919×815 252 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
3

Hi @Isa10 ,

  • Log in to Shopify Admin.
  • Navigate to Online Store > Themes > Actions > Edit Code.
  • Open “section-image-banner.css” file.
  • Paste CSS code at the bottom.
  • Save changes.
.banner__heading {
    margin-bottom: 0;
    font-size: 50px !important;
}​

  • Preview and publish if satisfied.

    You can adjust the font-size pixels values as per your requirement.

4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.banner__box {
padding: 2rem 3.5rem;
}

ZestardTech_0-1716540647293.png
ZestardTech_0-1716540647293.png1820×695 216 KB

5

Thank you this worked and I can now adapt the padding by changing the 5px by any size that fits me best !

1 Like
6

sorry this did not work for me.

7

Hi @Isa10 , We’re happy to see that our suggestion helped you solve the issue

Can you kindly give us a like? This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Thanks in advance. :heart_eyes: :heart_eyes:

1 Like