Re: Card and Currency Converter overlaps on Header

Solved

Card and Currency Converter overlaps on Header

asbe
Tourist
7 0 2

asbe_0-1697210305197.png

I cant solve this and dont know why is that happen  

 

It only happens on mobile phone 

 

www.powerfultechs.com

Accepted Solution (1)

Moeed
Shopify Partner
4361 1123 1380

This is an accepted solution.

Hey @asbe 

 

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>
.doubly-wrapper {
    margin-top: 60px !important;
}
</style>

RESULT:

Moeed_0-1697211920906.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 7 (7)

DeepVyas
Shopify Partner
744 7 7

That happens on every device or specific device resolution only.
In such case you have to write the CSS rule to avoid. 

 

Shopify Developer | Ⓢ : deepvyas71 | ✉ : deepvyas71@gmail.com
asbe
Tourist
7 0 2

Actually it happens on my mobile panel on shopify and my phone I think it happens on every phone. What is the css rule for it?

Moeed
Shopify Partner
4361 1123 1380

This is an accepted solution.

Hey @asbe 

 

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>
.doubly-wrapper {
    margin-top: 60px !important;
}
</style>

RESULT:

Moeed_0-1697211920906.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
asbe
Tourist
7 0 2

Omg I was searching for 2 hours thanks for helping 🙂

Moeed
Shopify Partner
4361 1123 1380

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
asbe
Tourist
7 0 2

asbe_0-1697212985958.png

but now in the desktop seems like this

Moeed
Shopify Partner
4361 1123 1380

Hey @asbe 

 

Remove my previous code and add this code with the same steps.

<style>
@media screen and (max-width: 767px) {
.doubly-wrapper {
    margin-top: 60px !important;
}
}
</style>

This code should fix your problem now!

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️