Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 10, 2014 at 5:34 am #365847
    alex5252

    I am trying to adjust my menu padding,

    I am using this:

    @media only screen and (max-width: 7140px) {
    .av-main-nav > li > a { padding: 0 4px; }}

    It works perfect on laptop but on tablet the padding becomes much larger. How can I make it so on all devices padding is 0 4?

    December 10, 2014 at 6:08 am #365854
    Flikk

    Hey,

    I dont know much about the @media stuff.
    But i think “@media only screen” says that the following is only for computer screens.
    There is another media type: “@media only handheld”. i guess that would be for the ipad.

    If you don’t limit your CSS to a media type, it should be fine.
    So try using just:

    .av-main-nav > li > a { padding: 0 4px; }

    December 10, 2014 at 5:05 pm #366073
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .av-main-nav > li > a {
padding: 0 4px!important;
}

    You do not need to use media queries if you would like to apply the changes on all screen sizes

    @flikk     Thanks for the help! And if you are interested, please see – https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

    Regards,
    Yigit

    December 11, 2014 at 5:25 am #366476
    Flikk

    Hi,

    thx for the link, but if i’d really wanted to learn more about it, i would have looked it up myself.:)
    And does the CSS need the !important keyword?
    When i don’t see a link to the site i am to lazy to open my own site to test it.

    Not that a single word in the code would really affect the loading time of the page, but it adds up.

    Greetings Flikk

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Menu Padding’ is closed to new replies.