My header is collapsing with product page in mobile view when i make my header transparent help me

[odejia9587]

i have created my store header transparent and works very well on desktop view but it doesn't working properly on the mobile view it collapsing with the product image in mobile view my store url 

[Moeed]

Hey @odejia9587 

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>
product-info {
    padding-top: 80px !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[topnewyork]

Hi @odejia9587 ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.section-template--17096668676249__main-padding {
    padding-top: 65px !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Rahul_dhiman]

Hello @odejia9587 
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-slider.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.slider.slider--mobile .slider__slide {
padding-top: 4.5rem;
}
}

result

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

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @odejia9587 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media only screen and (max-width: 600px) {
product-info {
    padding-top: 70px !important;
}
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Vinsinfo]

@odejia9587 Please follow below steps to properly align header and product images on mobile view. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Go to "base.css" file.

4. Paste the below code at the bottom of the file and save changes.

sticky-header.header-wrapper {
    position: relative !important;
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.