Theme not responsive in mobile & tablet

  • Hello,

    I am trying to get my website to work in mobile and tablet to look same as it is in desktop version. website URL is https://www.apexbankonline.com. The following are the issues i am facing:

    1. In mobile, the header repeats itself and all the button / description are stacked vertically on the homepage.

    2. In tablet, header repeats itself and there is too much space between the button and description.

    I have removed the header on the mobile version using custom css however i would like the header to appear properly in the mobile and tablet and also have proper spacing between all the content.

    Could you please advise a custom CSS i could add to fix these issues?

    Thank you for your help in advance.

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hello,

    You resolved that problem, how did you do?

    I need your help.

    My email is [email protected]

    Thanks.

    I have been working on the same issue for a while. When you figure out how to resolve the issue will you post it here?

    Thanks

    Thread Starter blakshmi

    (@blakshmi)

    Hello,
    I added a plugin called Meta Tag manager and added the below tag.

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

    This should solve the overlapping problem in different devices. However i was not able to solve the repeated header so i removed it completely from mobile and tablet version using the below custom CSS.

    @media screen and (max-width:768px){
    header.site-header {
    background: transparent !important;
    }
    }
    @media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    header.site-header {
    background: transparent !important;
    }
    }

    I tried your fixes on my site, but it did not work. Granted I am a novice and I am playing catch up on how to manage our website. But that is what you get when you are the new guy.

    Thanks though.

    Thread Starter blakshmi

    (@blakshmi)

    Send me your website URL and what exactly the issue is and i will try to help you out.

    1stbaptistcarson.com

    I have multiple headers on my mobile site. I cannot seem to get them to go away. I tried what you said yesterday, but with no avail. Granted I might not have done it correctly. I was a civil engineer before becoming a pastor. Websites are well out of my wheel house, but I am learning more and more each day.

    Thread Starter blakshmi

    (@blakshmi)

    Try adding this to the Additional CSS section under Appearance –> Customize –> Additional Css

    @media screen and (max-width:768px){
    header.site-header {
    background-image: none;
    }
    }

    This should remove the header image from your website only on the mobile version.

    Thank you so much. It appears to have worked.
    Also, I have received great reviews from people on how wonderful the website works.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Theme not responsive in mobile & tablet’ is closed to new replies.