Header and Menu not centered

  • keepitrusty

    (@keepitrusty)


    2 years ago

    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)

    2 years ago

    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;
}
    https://ibb.co/wz2k6zH
    https://ibb.co/Dgj9JZD
    • This reply was modified 2 years ago by Jay.
    Jay

    (@jen-na)

    2 years ago

    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:

    https://ibb.co/R0vtR2Q
    Thread Starter keepitrusty

    (@keepitrusty)

    2 years ago

    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.