mobile issues

  • vanjacou

    (@vanjacou)


    10 years ago

    2 Mobile device display problems

    1) menu icon displays overlapping main logo.
    Any way to control menu position on mobile?

    2) content is compressed into narrow center column.
    (i.e. main image on homepage is kept small, and text on about page is in a narrow column.)
    Possibly main container width setting? % vs. px?

    https://kiervanja.com

Viewing 10 replies - 16 through 25 (of 25 total)
  • Thread Starter vanjacou

    (@vanjacou)

    LOL!

    I should have asked…

    Want some extra fun?? ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Let me know if you have another WordPress theme!

    Thread Starter vanjacou

    (@vanjacou)

    OK one more small puzzle…

    how do I remove the horizontal rules on the top and bottom – and remove the vertical space the consume as well?

    Thread Starter vanjacou

    (@vanjacou)

    (they) consume…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Add this outside of the Media Query:

    #header,
#footer {
    border: none;
    padding: 0;
}

#site-logo {
     top: 0;
}

    Inside the Media Query change this:

    .mobile-button {
        margin-top: 40px;
    }

    #main-nav.active {
        margin-top: 74px;
    }

    To this:

    .mobile-button {
        margin-top: 10px;
    }

    #main-nav.active {
        margin-top: 44px;
    }

    Thread Starter vanjacou

    (@vanjacou)

    Sorry, what file are you referring to regarding these edits?
    I don’t know where the Media Query is.

    Thread Starter vanjacou

    (@vanjacou)

    I see the media-queries.css file now…

    but where do the other bits go? –> style.css?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hang on

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    When I say Media Query I’m referring to this line:

    @media screen and (max-width: 760px)

    And everything that is contained within it, e.g.:

    @media screen and (max-width: 760px) {
  This stuff
}

    Thread Starter vanjacou

    (@vanjacou)

    Gotcha! Thanks!

Viewing 10 replies - 16 through 25 (of 25 total)
  • The topic ‘mobile issues’ is closed to new replies.