how to add padding in pre-order page?

[Emiway]

wanna add some padding on top, only in mobile view

URL: https://redpandaoutdoor.in/products/cortex-custom-text?_pos=1&_psq=cus&_ss=e&_v=1.0

[DaisyVo]

Hi @Emiway

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
section.shopify-section--main-product {
    padding-top: 50px;
}
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[websensepro]

Hi @Emiway

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:768px){
img.rounded {
    padding-top: 40px !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[suyash1]

@Emiway - please add this css to the very end of your theme.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → theme.css

@media screen and (max-width: 999px) {
#shopify-section-template--15186844024904__main {padding-top: 48px !important;}
}

[topnewyork]

@media (max-width: 768px){
.product-gallery__media.snap-center {
    padding-top: 45px !important;
}
}

[Emiway]

i had added a breadcrumb also which got hide behind navigation bar

[Emiway]

i had added a breadcrumb also which got hide behind navigation

[BSS-TekLabs]

• Here is the solution for you @Emiway
• Please follow these steps:

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before and press ‘Save’ to save it

@media screen and (max-width: 768px){
main#main {
    padding-top: 50px !important;
}
}

• This is the result you will get:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[websensepro]

@Emiway

@media(max-width:768px){
.anchor {
    padding-top: 133px !important;
}
}

[websensepro]

@Emiway Remove the previous code.

[Emiway]

its affecting the main-product file, i want changes in pre order template only

[websensepro]

@Emiway use this code Your product was going behind the header, bro, whenever.

@media (max-width: 768px) {
    .anchor {
        padding-top: 83px !important;
    }
}

[Emiway]

i had created 2 templates for products, on is main-product & another one is pre-order. i wanna make changes in pre-order template only

[websensepro]

Where is the pre-order? Please provide a screenshot and link, I can’t find it.

[websensepro]

@Emiway

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:990px){
safe-sticky.product-info {
    padding-top: 40px !important;
} 
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!