Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 24, 2023 at 5:21 pm #1405400
    Monika

    Hey there,

    perhaps you can help me.
    I tried tons of Css, but no matter how i try:
    as soon as I add a class, which makes an underline, the text is left flush left.
    But I want it to be centered.

    Do you know if theres some way to get this effect on centered Text?

    Here’s my Css:

    .underline-mittelachsig {
  position: relative;
  display: inline-block;
  font-family: futura-pt, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center!important;
}

.underline-mittelachsig::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 7px;
  background-color: #ff0053;
}

    Thank you!
    Monika

    April 24, 2023 at 5:37 pm #1405405
    Guenni007

    Without a link to the issue – it is hard to give advice.
    where did you add that custom class – to what element?

    April 24, 2023 at 5:43 pm #1405406
    Monika

    Hi guenni,

    the Link is in the private Section.
    Do you also need a user login?

    April 25, 2023 at 7:56 am #1405479
    Ismael

    Hi,

    Thank you for the inquiry.

    We adjusted the css code a bit.

    .underline-linksbuendig {
    position: relative;
    display: block;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    width: 100%;
}

.underline-linksbuendig::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    border-bottom: 7px solid #ff0053;
}

    Best regards,
    Ismael

    • This reply was modified 1 year, 4 months ago by Rikard.
    April 25, 2023 at 9:21 am #1405488
    Guenni007

    ok

    April 27, 2023 at 11:24 am #1405813
    Rikard

    Hi,

    Thanks for pointing that out @guenni007, I’ve edited Ismaels code :-)

    Best regards,
    Rikard

    April 28, 2023 at 9:20 am #1405916
    Monika

    Thank you Very much Ismael.

    Now its realy centered!

    Would it also be possible to puit the unnderline directly under the text? Now its much longer.
    See link in private Section.

    This is the code:

    .underline-mittelachsig {
    position: relative;
    display: block;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    width: 100%;
}

.underline-mittelachsig::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    border-bottom: 7px solid #ff0053;
}
    April 29, 2023 at 3:35 pm #1405991
    Mike

    Hi,
    Thank you for the link to your site, to have the text centered for your textblock element with the custom class underline-mittelachsig
    please do not use the inline style text-align: center;, I’m not sure if you are manually adding it or if you are using the text center option in the text element.
    Then use this css instead:

    #top .underline-mittelachsig {
    position: relative;
    display: flex;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    justify-content: center;
}
#top .underline-mittelachsig h1 {
    border-bottom: 7px solid #ff0053;
    padding-bottom: 10px;
}

    I linked to my test page below, this is the expected results:
    Enfold_Support_1901.jpeg
    Best regards,
    Mike

    April 29, 2023 at 3:41 pm #1405992
    Monika

    That Worked!!
    You are amazing, Thank you so much!
    :)

    Cheers
    Monika

    April 29, 2023 at 3:47 pm #1405993
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Underline is not possible for centered Text’ is closed to new replies.