padding around button in mobile mode

[ellacoker]

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...

PW: ellacoker

[ChiragPatel2911]

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.

[theycallmemakka]

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 </body>

<style>
section#shopify-section-template--24209589993766__rich_text_C8dtF9 a.button.button--secondary {
    margin-top: 15px;
}
</style>

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

[ellacoker]

thank you so much! this worked perfectly.

[ChiragPatel2911]

@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.

[LizHoang · Accepted solution]

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 : 

[ellacoker]

Thank you Liz, this is great!