Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 22, 2023 at 1:15 pm #1408132
    Monika

    Hey there,

    I would like to have an underline for all links, but: the underline should not stick to the Text.
    I want it to have a little bit of space.
    This code works perfectly for desktop. But in Tablet and mobile, somehow the margin is too much.
    Please look at the Screenshot I made in the mobile view.

    How can i minimize the Margin in Tablet and mobile? I tried different codes with media Queries, but nothing worked.

    This is the Code now:

    
/* Alle Links haben eine Underline */
a {
  text-decoration: underline;
    text-underline-position: under;
}
    May 22, 2023 at 1:16 pm #1408133
    Monika
    This reply has been marked as private.
    May 22, 2023 at 2:48 pm #1408142
    Nikko

    Hi Monika,

    Please try to use text-underline-offset and test which value would work better on your case:

    @media only screen and (max-width:767px) {
  a {
    text-underline-offset: -1px;
  }
}

    I hope it helps.

    Best regards,
    Nikko

    May 22, 2023 at 2:55 pm #1408145
    Monika

    Thank you Nikko,

    I added you Css, but sadly this does not work.
    the word “text-underline-offset” is getting colored red.

    Do you know why its not working?

    This is my code:

    a {
  text-decoration: underline;
    text-underline-position: under;
}

@media only screen and (max-width:767px) {
  a {
text-underline-offset: -1px!important;
}
}
    May 22, 2023 at 3:18 pm #1408152
    Nikko

    Hi,

    What browser are you using?
    It seems to work on my end and also I checked if this is supported in major browsers: https://caniuse.com/?search=text-underline-offset and it is supported except for IE.
    Here’s the documentation of it as well: https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset
    Also, try adjusting different values.
    If that still doesn’t work, then I think border is the only option left:

    @media only screen and (max-width:767px) {
  a, 
  #top .av_inherit_color a {
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 1px;
  }
}

    just adjust the values as you see fit.

    Best regards,
    Nikko

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.