• keepitrusty

    (@keepitrusty)


    Hi,

    It was recently brought to my attention that on some tablets and “foldable phones” my website’s header and top menu are left of center. I have tried numerous things to fix this, but I’ve come up short. Can someone help?

    Thanks!

    p.s. I am aware some page images are not centered, but I can fix these within the page/post editor easily.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Jay

    (@jen-na)

    In your CSS code

    @media screen
    div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;

    Change to:

    @media screen
    div.custom-menu-class li {
    padding: 0px 10px 0px 10px;
    display: inline-block;

    In your inline code change:

    Style Attribute {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    }

    to

    Style Attribute {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px;
    }
    • This reply was modified 2 years ago by Jay.
    Jay

    (@jen-na)

    Your image is off-centre because it has more margin on the right hand side compared to the left. If you crop the image to the edge of your logo on both sides and re-upload it, it should centre normally.

    Like this:

    Thread Starter keepitrusty

    (@keepitrusty)

    Jay, thanks for this but unfortunately neither of these solutions solve the respective issues.
    See the attached image to see what some visitors are seeing on foldable phone and tablets:

    https://imgur.com/a/DKE3E58

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

The topic ‘Header and Menu not centered’ is closed to new replies.