Help with padding on mobile! Page content is covering the custom header!

Highlighted
Tourist
7 0 0

So I have an issue on my site where I'm using a custom header above the main header and it functions properly on a desktop pushing everything else down, but when on a mobile device, the page content just goes back up to the top, covering the header. 

How do I push the page content on just mobile to go back down to be aligned with the header? Note: The custom header is a nicotine warning banner. The sizing has to stay the same.

Thanks in advance!

Theme: Turbo/Portland - Out of the Sandbox

Site: https://7dazemfg.com/

Image from iOS.png

0 Likes
Highlighted
Astronaut
1082 178 213

Hello,

1. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
2. paste this code right above the </body> tag:

<style>
@media (max-width:800px){
    .shg-box-content > div:first-of-type > div:first-of-type > .shg-box[id]{
        min-height: 158px !important;
    }
}
</style>


This ought to fix the issue, but I noticed you have a few other bugs on your page, like this: 

Screenshot_3.jpg

Getting these fixed would be essential to improve the UX and SEO of your website to, subsequently, maximize the potential for conversions.

Regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Tourist
7 0 0

Thank you! Worked perfectly! Just had to adjust the min height to 200px.

And thank you for catching that!

Cheers!

0 Likes
Highlighted
Astronaut
1082 178 213

You're welcome!

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Tourist
7 0 0

I actually came across another issue when applying your code. It looks fine, however i cant select on the hamburger menu icon.

0 Likes
Highlighted
Astronaut
1082 178 213

Use this code instead:

<style>
@media (max-width:800px){
    .shg-box-content > div:first-of-type > div:first-of-type > .shg-box[id]{
        min-height: 158px !important;
    }
	
	.shogun-root,
	.shogun-root *{
		position: relative !important;
		z-index: -1 !important;
	}
}
</style>
◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Tourist
7 0 0

Sorry to be a bother, but when I apply this code, I can't click on buttons on the site now.

0 Likes
Highlighted
Astronaut
1082 178 213

remove all the code I sent plz, I'll debug and fix it

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Tourist
7 0 0

The code has been removed.

0 Likes
Highlighted
Astronaut
1082 178 213

Paste this new code in:

<style>
.header-section {
    z-index: 5 !important;
}
</style>
◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like