Header and Footer are occupying more space than body itself on a mobile device.

ravitavva

Hello -- I am kind of stuck on mobile response of our website http://htgc.org/HTGC3

I have few issues that are debilitating mobile response

I made the header fixed, however by doing this, the header is occupying/overlapping some of the body area. To mitigate this, I have added some <br> to message article on the home page.
And for other pages to show up properly, I have added few <br>
Now for an article that has ONLY an iframe form, the footer is occupying more area on the mobile device than the body of the iframe form.

To check it go to http://htgc.org/HTGC3 --> Click On SERVICES --> PUJA SPONSOR

as you minimize the browser screen, or on mobile device you see the space for Iframe form is so little compared to footer.

Please let me know what needs to be done here.

Thx.
Ravi Tavva

saguaros

Hi Ravi,

I don't see any overlap on that PUJA SPONSOR page. Could you check again?

ravitavva

saguaros Please open the site http://htgc.org/HTGC3 I have removed un wanted fillers articles I put there to create that space.

On desktop the page looks really bad, however on mobile site it looks bit better -- I had resolved an iFrame issue that I have earlier..

Thx

saguaros

In the file: /templates/ja_charity/css/custom.css

Line 18

@media screen and (min-width: 992px) {
    .t3-sl {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
}

change it to:

@media screen and (min-width: 992px) {
    .t3-sl {
        padding-top: 92px !important;
        padding-bottom: 0px !important;
    }
}

ravitavva

@saguaros Thank you. I see the improvement on the header

But I am wondering, how could I get a smooth transition when I move the window size from super big to minimal, to mobile device. The transition is not smooth. For example, after putting your recommendation, on laptop it looks good, however, on mobile app, header still overlaps. Had to put the hack for Mobile version now.

Let me know. Immensely appreciate your help!

saguaros

ravitavva Hi

Actually, no one resize your site when viewing in a device, you can test in different devices: laptop, PC, tablet, mobile... If there is issue, let me know 🙂

ravitavva

@saguaros I have put 2 hacks -- modules, so that on mobile device, the header doesn't overlap on the page content.

HomepageMessage -- For homepage
NO Message on All other Pages -- For all other pages

This is what I did, I am not super happy, but I am not sure what else I could do.

Since you have admin access to our site, please take a look and let me know, if there is a better way. My understanding is that, there must be on, but I don't know how at this point :-)

Appreciate all your passion in helping folks like me.

Thx

saguaros

Could you share screenshot of the overlap? I can't see it now.