Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #883687

    Dear Sir,

    Please can you help :)

    When I look at the top menu of my website page on desktop the margin on top & bottom is perfect.

    here is the page:

    But when it goes into responsive (around width 630px), and on mobile phone it loses this margin on the top. How can I set the margin for top & bottom when it goes into responsive mode. I’d like a uniform top and bottom margin throughout responsive,

    Best wishes,

    Christopher Skelton.

    • This topic was modified 6 years, 11 months ago by kelsangchodor.
    #883866

    Hey kelsangchodor,

    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:630px) {
      #header_meta {
        padding: 7px 0;
      }
    }

    Let us know if this helps.

    Best regards,
    Nikko

    #883878

    Hi Nikko,

    That looks much better on the mobile phone – thank you!

    But it still loses the equal top/bottom margin when I’m resizing window moving from around 768 pixels wide (when the margin is good – equal top & bottom) and then going < 768 it loses the top margin and isn’t vertically aligned) on my browser (but does look good on mobile!)

    I hope I’ve explained that coreclty so it makes sense what the problem is!

    Christopher

    #884883

    Hi Christopher,

    Can you try to change the code I have given above with:

    @media only screen and (max-width:767px) {
      #header_meta {
        padding: 7px 0;
      }
    }

    Also adjust the 7px (it’s for top and bottom padding), let us know if this helps.

    Best regards,
    Nikko

    #884933

    Awesome! that worked!
    Thank you!!!

    #884949

    Hi,

    Glad that we could help. Thanks for using Enfold :)

    Best regards,
    Nikko

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Top Menu losing margin when responsive’ is closed to new replies.