Footer section is not properly displayed on iPhone

The "Copyright" text section is not visible on my iPhone 7+, it appreadrs hidden below the "Find your local center" section.

  • Nithin
    • Support Wizard

    Hi allanlove,

    Hope you are doing good today. :slight_smile:

    Seems like the following CSS is causing the issue:

    @media all and (min-width:320px) and (max-width: 600px) {
            #top-footer .tg-container {
                height: 350px !important;
            }
    }

    Could you please try either increasing the value of height, or setting the height as auto, and see how that goes.

    That's for example:

    @media all and (min-width:320px) and (max-width: 600px) {
            #top-footer .tg-container {
                height: auto !important;
            }
    }

    And see how that goes? Also, I could notice that the following is defined twice:
    @media all and (min-width:320px) and (max-width: 600px)

    That's on line 3394, and 3425 as shown in the screenshot. I don't see any closing bracket for the one opened in line 3394. If the intention is to add everything inside a single screensize, then you don't have to add the same screensize on line 3425 of the shared screenshot:

    Since I could see errors listed in the default CSS editor, wasn't sure trying to update the CSS via editor would be safe, in case the site goes down, we don't have FTP access to bring back the site up. So, I haven't made any changes regarding this via the WP editor.

    Would recommend you to check, and make the required changes as pointed, and see how that goes.

    Regards,
    Nithin

  • Nithin
    • Support Wizard

    Hi allanlove,

    Could you please try the following new CSS, and see how that goes in iPhone7+:

    /* Iphone 7+ */
    @media only screen
      and (min-device-width: 414px)
      and (max-device-width: 736px)
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: portrait) { 
    
    #sl_postcodeLookup {
    
        bottom: 10% !important;
    }
    
    #text-10 > div > p:nth-child(5) {
    	margin-bottom: 25%;
    }
    
    }

    You can add this in the child themes style.css. If you still have issue, please share a screenshot of how you are seeing it in iPhone, so that we could have a better idea.

    Regards,
    Nithin

  • allanlove
    • The Incredible Code Injector

    Hi, thank you for your response.

    I have tried this css and placed it in various places to se if it had any effect elsewhere but unfortunately this hasn't helped.

    I have attached some screenshots with descriptions on them of what I see.

    Hopefully this gives you some kind of idea?

    Look forward to hearing back from you,

    Regards

  • Nithin
    • Support Wizard

    Hi allanlove,

    I just got one of our staff test the site in iPhone+7 mobile, and this is how we are seeing the website in our side.

    Tested in Safari, and Chrome but the footer seems to load fine, as shown in the above screenshot. Could you please try clearing the browser cache, and history, and check whether it loads fine?

    If you still have issue, please test whether you get the same in every browser etc, so that we could have a better idea.

    Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.