• Closed
  • Jeanae White
    Spectator
    August 21, 2015 at 7:58 pm #20035

    When viewing my website on mobile the site name, logo and tagline display over the bootstrap slider on homepage.
    How can I fix this?

    Denzel Chia
    Moderator
    Posts: 2656
    August 22, 2015 at 9:08 am #20038

    Hi,

    Please post your website url, we will provide you with a custom css solution.

    Thanks!

    Jeanae White
    Spectator
    Posts: 13
    August 22, 2015 at 5:55 pm #20043

    newlifeiboga.com and
    newlifeayahuasca.com

    Denzel Chia
    Moderator
    Posts: 2656
    August 23, 2015 at 11:56 am #20055

    Hi,

    For newlifeiboga.com
    Please try the following in Theme Options -> Custom CSS

    @media screen and (max-width: 768px) {
    .header {
    height: 350px !important;
    }
    #logo a {
    margin-top: 20px;
    }
    }

    for newlifeayahuasca.com
    Please try the following in Theme Options -> Custom CSS

    @media screen and (max-width: 768px) {
    .header {
    height: 400px !important;
    }
    #logo a {
    line-height: 0.8em;
    margin-top: 20px !important;
    }
    }

    You can change the numbers for fine tuning.

    Thanks!

    Jeanae White
    Spectator
    Posts: 13
    August 23, 2015 at 6:06 pm #20057

    Neither of these solutions worked…they actually didn’t change the way it displays at all. I believe this is an error in the theme as i was using the free version and it displayed correctly but as soon as i installed the paid version it changed. Any other suggestions?

    Jeanae White
    Spectator
    Posts: 13
    August 23, 2015 at 6:21 pm #20058

    I have tried playing with the numbers and no matter what numbers i put in, the mobile display doesn’t change.

    Denzel Chia
    Moderator
    Posts: 2656
    August 23, 2015 at 7:27 pm #20061

    Hi,

    For your website. http://newlifeayahuasca.com/
    I viewed your custom css source code, you had entered it wrongly.

    With reference to this screenshot http://share.pho.to/9fLV8/nr/original
    This is what I saw in your custom css.


    1
    2
    3
    4
    5
    6
    7
    8
    9
    @media screen and (max-width: 768px) {
    .header {
    height: 800px !important;
    }
    #logo a {
    line-height: 1.8em;
    margin-top: 60px !important;
    }
    }

    Please remove the numbers 1 to 9

    As for your other website newlifeiboga.com
    It is working properly. Please see screenshot http://share.pho.to/9fLVh/23/original
    Please see http://www.responsinator.com/?url=www.newlifeiboga.com%2F

    Please clear your mobile browser cache before you view your site.

    Thanks!

    Jeanae White
    Spectator
    Posts: 13
    August 23, 2015 at 11:04 pm #20062

    Thank you! I see that it works now..I also had a question for the Desktop view. The logo on the left is not centered with the text and the header background gets cut off near the bottom. Suggestions?

    Denzel Chia
    Moderator
    Posts: 2656
    August 24, 2015 at 7:53 am #20069

    Hi,

    Please go to Theme Options -> Header -> Header Height and set it to probably 180px. This will extend the header background.

    The logo on the left is not centered with the text

    Sorry I don’t understand this issue.
    For desktop view, the logo and site title is left align by design.
    Do you mean that you want them to be the same layout as your mobile view? Everything centered?
    Or you want to move the site title down to middle of your logo image?

    Please advise.

    Thanks!

    Jeanae White
    Spectator
    Posts: 13
    August 26, 2015 at 10:58 pm #20156

    Hello,
    Let me clarify. I want both the logo and the title/tagline aligned left as they currently are, what i meant is that the text to the right of the logo is positioned toward the top of the logo. I would like the text to display to the right of the CENTER of the logo. And there is a grey bar the displays on the bottom part of the header that cuts off the header background image. Does that help?

    Denzel Chia
    Moderator
    Posts: 2656
    August 27, 2015 at 7:39 am #20176

    Hi,

    Thank you very much for your explanation.

    For http://newlifeayahuasca.com/ and http://www.newlifeiboga.com/

    Please use the following code in Theme Options -> Custom CSS

    .menu-header {
    border: medium none !important;
    box-shadow: none !important;
    }
    #logo a {
    left: -15px;
    position: relative;
    top: 24px;
    }

    Screenshot of results.
    http://prntscr.com/89dj0v
    http://prntscr.com/89dj8q

    Thanks!