Mobile header alignment - by strangehaven

This topic has 9 replies, 3 voices, and was last updated 4 years, 10 months ago ago by Olga Barlow

  • Avatar: strangehaven
    strangehaven
    Participant
    May 9, 2019 at 18:24

    On mobile my site header is misaligned to the right. Is there a way that I can align it center?

    Please, contact administrator
    for this information.
    8 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 10, 2019 at 07:41

    Hello,

    The problem is caused by this custom CSS code http://prntscr.com/nmp5k4 Please find where you added this code and delete or change it.

    Regards

    Avatar: strangehaven
    strangehaven
    Participant
    May 10, 2019 at 22:05

    I removed those snippets of code and it doesn’t appear to have changed anything.

    Avatar: strangehaven
    strangehaven
    Participant
    May 11, 2019 at 17:15

    So I was able to find all of these snippets of code.
    If you view my site without the code below my logo is way too small.

    header .header-logo img {
        max-width: 900px !important;
    }

    without code
    The above code was added so that my logo header would be the appropriate size.
    Without these bits of code my logo is centered but way too small.

    The above code works for the logo header size for my site on desktop perfectly, except the header logo is not fitting the mobile screen size and landscape mobile size and is off centered.
    with code
    mobile misalignment

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 13, 2019 at 08:36

    Hello,

    Sorry for the delay due to the weekends.
    To apply the code for desktop only, you can use media query. Here is an example – http://prntscr.com/nnt4r7

    @media only screen and (min-width: 992px) {
        your_code
    }

    https://www.w3schools.com/css/css3_mediaqueries_ex.asp

    Regards

    Avatar: strangehaven
    strangehaven
    Participant
    May 14, 2019 at 19:43

    thank you.

    Im using the css:

    @media screen and (max-width: 480px) {header .header-logo img {
        margin-left: auto;
        margin-right: auto;
    max-width: 250px !important;
    }}

    to make the header logo a bit larger, but it offsets it to the right . Is there anyway to fix this?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 15, 2019 at 07:33

    If you delete the mentioned code, the logo will look fine – http://prntscr.com/noqay9
    Or you can change this code http://prntscr.com/noqbvm to http://prntscr.com/noqcb5

    @media screen and (max-width: 480px) {
        header .header-logo img {
            margin-left: auto;
            margin-right: auto;
            max-width: 250px !important;
        }
        .template-container .header-logo {
            max-width: 250px !important;
        }
    }

    Regards

    Avatar: strangehaven
    strangehaven
    Participant
    May 17, 2019 at 21:04

    Thank you for all your help! It really is greatly appreciated!

    I was able to center it by tweeking the margin-left

    A few other minor things on mobile:

    1. Is it possible to disable the search at the top only on mobile view?
    2. I am not able to fix the menu links color on mobile – there is a red color showing up for the active links and I changed everything within the 8theme admin – do you know where I can change this?

    Thanks so much!

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 20, 2019 at 14:56

    Hello,

    1) Add the following custom to child theme style.css

    @media only screen and (max-width: 992px){
        .navbar-header.navbar-right .navbar-right .header-search{
            display:none;
        }
    }

    2) Unfortunately, this is a theme bug and we’ll fix it in next theme update. Use the following custom to change the color before the update if you need it:

    @media only screen and (max-width: 992px){
        .template-container .mobile-menu-wrapper .menu > li.over > a {
            color: #b351f1;
        }
    }

    Regards

  • Viewing 9 results - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.