padding around button in mobile mode

Shopify Discussion

Topic summary

A Shopify store owner needs to add padding above a button in mobile view to separate it from text above.

Problem Details:

  • Issue occurs on a product page (heart chakra face mask)
  • Screenshot shows button positioned too close to text content
  • Specifically affects mobile display

Solutions Provided:

Three community members offered CSS-based solutions:

  1. ChiragPatel2911 (posted twice): Suggested adding media query CSS to base.css file targeting .rich-text--full-width .rich-text__buttons with padding-top: 20px

  2. theycallmemakka: Provided custom CSS to add in theme.liquid file before </body> tag, with additional note about optimizing cover image dimensions (recommending rectangular over square images)

  3. LizHoang: Recommended adding CSS via Theme Customizer’s Custom CSS section, targeting .rich-text__buttons.scroll-trigger.animate--slide-in with padding-top: 50px !important, included visual result screenshot

Resolution:
The original poster confirmed LizHoang’s solution worked perfectly, marking the issue as resolved.

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

hello,

i would like to add padding above this button to seperate it out from the text a little. what code can i use for this? thank you.

ella.

URL: https://admin.shopify.com/store/wss10u-is/themes/175807824166/editor?previewPath=%2Fproducts%2Fheart-chakra-face-mask

PW: ellacoker

Screenshot 2025-01-31 at 14.34.29.png
Screenshot 2025-01-31 at 14.34.29.png1298×1872 289 KB

2

Hello @ellacoker

You can add a custom CSS under your theme file.

Go to the Online Store → Edit your theme code and find the base.css

@media(max-width:768px){
.rich-text–full-width .rich-text__buttons {
padding-top: 20px;
}
}

Add this CSS at the end of that base.css file and save it. I hope that works for you.

3

Hi @ellacoker ,

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

Note: As you are using a square image as a cover image, the height of the image will be quite large to display all the images. The height of the section will be equal to the width of the screen. For optimum results, I recommend using a rectangular image.

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

4

@ellacoker

Hello @ellacoker

You can add a custom CSS under your theme file.

Go to the Online Store → Edit your theme code and find the base.css

@media(max-width:768px){
.rich-text–full-width .rich-text__buttons {
padding-top: 20px;
}
}

Add this CSS at the end of that base.css file and save it. I hope that works for you.

5

Hi @ellacoker

You can follow this instruction:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

.rich-text__buttons.scroll-trigger.animate--slide-in {
    padding-top: 50px !important;
}

Result :

LizHoang_0-1738304263301.png
LizHoang_0-1738304263301.png475×723 28.8 KB

6

Thank you Liz, this is great!

7

thank you so much! this worked perfectly.