Top padding above slideshow?

[Ryan1998]

How do I add top padding above my slideshow on product page please?

url: https://errival.com/products/errival%E2%84%A2-mini-rubber-band-shotgun 

[Huptech-Web · Accepted solution]

Hello! @Ryan1998 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media only screen and (min-width: 750px){
 .product.grid {
    margin-bottom: 30px;
 }
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

Thank You
K.K

[Moeed · Accepted solution]

Hey @Ryan1998 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
section#shopify-section-template--21900340199753__slideshow_LQNa86 {
    padding-top: 60px !important;
    background: white !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[niraj_patel · Accepted solution]

Hello @Ryan1998 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
product-info#MainProduct-template--21900340199753__main{
padding-bottom: 28px !important;
}
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Ryan1998]

Desktop version only please.

[Huptech-Web · Accepted solution]

Hello! @Ryan1998 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media only screen and (min-width: 750px){
 .product.grid {
    margin-bottom: 30px;
 }
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

Thank You
K.K

[Moeed · Accepted solution]

Hey @Ryan1998 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
section#shopify-section-template--21900340199753__slideshow_LQNa86 {
    padding-top: 60px !important;
    background: white !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[niraj_patel · Accepted solution]

Hello @Ryan1998 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
product-info#MainProduct-template--21900340199753__main{
padding-bottom: 28px !important;
}
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Rahul_dhiman · Accepted solution]

Hello @Ryan1998 

Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-main-product.css ----> line number 24
search this code

@media screen and (min-width: 750px) {
.product__column-sticky {
display: block;
position: sticky;
top: 3rem;
z-index: 2;
}
}

replace with this code

@media screen and (min-width: 750px) {
.product__column-sticky {
display: block;
position: sticky;
z-index: 2;
}
}

 result

If this was helpful, hit the like button and accept the solution.
Thanks