Slider gets covered up by header and header logo seems elongated on mobile site

[Kaz]

Hi there.

I am using the Gravida Pro theme on my site – https://i-smartsignaller.com/home/

On desktop, it looks fine.

However, on mobile, the slider gets covered up by my header. I’m not sure if it’s a theme issue or a WordPress setting issue.

Secondly, the header logo appears elongated on my mobile site too. And that makes the header look elongated, I guess.

I would appreciate some help on how to troubleshoot this.

Thank you.

Regards,
Kaz

[Sonl Sinha]

Hi Kaz,

I have check on mobile and it looks perfect. Can you send us the screenshot?

Post your screenshot on imgur.com and paste the share URL here.

Regards,
Dave

[Kaz]

Hi Dave,

Here’s the screenshot of my homepg on the mobile browser – http://imgur.com/a/aR2Hq

The header banner’s height is almost the same height as the slider section. On the desktop, the header is narrower in height and the slider image section is longer. They don’t appear proportionately in that way on the mobile screen.

Hop you can advise on how to get the mobile header banner and slider layout proportions to be similar to as what’s seen on the desktop.

Best rgds,
Kaz

[Sonl Sinha]

Hi Kaz,

Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

Add this code there:

@media screen and (max-width:780px){
.head_inner{ padding:0 !important;}
.logo{margin:0 !important;}
.logo img{height:50px !important; width:59px !important;}
}

Regards,
Dave

[Kaz]

Thank you, Dave. It works well.

Best regards,
Sheryl

[Sonl Sinha]

🙂

[Author]

Posts