Underline is not possible for centered Text - Support | Kriesi.at

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
April 24, 2023 at 5:21 pm #1405400
Monika
Participant
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
Participant

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
Participant

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
Moderator
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, 8 months ago by Rikard.
April 25, 2023 at 9:21 am #1405488

Guenni007
Participant

ok

April 27, 2023 at 11:24 am #1405813

Rikard
Keymaster

Hi,

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

Best regards,
Rikard

April 28, 2023 at 9:20 am #1405916
Monika
Participant
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
Moderator
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:

Best regards,
Mike
April 29, 2023 at 3:41 pm #1405992

Monika
Participant

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

Cheers
Monika

April 29, 2023 at 3:47 pm #1405993

Mike
Moderator

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.