Question 332664 in Html Question posted in
Some basic documentation can be found here.

Html – How to make title h1 elastic with CSS

I need to say that is a while since I don’t put my hands on CSS
by the way, my problem is that am no able to create an elastic h1
what I mean by elastic?
I mean that is in the center and become bigger according to the number of words that are inside.
Instead I get a h1 that cover 100% of page
I show the code

.title h1 {
    text-align: center;
    font-family: 'Namecat';
    color: #e20c70;
    font-size: 70px;
    filter: none;
    border: 4px solid #d10459;
    letter-spacing: 5px;
    border-radius: 20px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin: auto;
    box-shadow: 0 0 0.2rem #fff, 0 0 0.1rem #fff, 0 0 1rem #d10459, 0 0 0.3rem #d10459, 0 0 1.8rem #d10459, inset 0 0 0.2rem #d10459;
}

it is all day that I am trying to figure out where I mistake.

ah I forget to mention that this code I need for drupal cms

Tags:

2

Answers


  1. 0

    you can use clamp() to kind of make word responsive elastic and use width: fit-content to make it increase with length of title not take by default full-width. Maybe it answers your question

    h1.title {
    width:fit-content;
    text-align: center;
    font-family: 'Namecat';
    color: #e20c70;
    font-size: clamp(15px,5vw,8rem);
    filter: none;
    border: 4px solid #d10459;
    letter-spacing: 5px;
    border-radius: 20px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin: auto;
    box-shadow: 0 0 0.2rem #fff, 0 0 0.1rem #fff, 0 0 1rem #d10459, 0 0 0.3rem #d10459, 0 0 1.8rem #d10459, inset 0 0 0.2rem #d10459;
}
    <h1 class="title">Lorem ipsum dolo</h1>
    Login or Signup to reply.
  2. 0

    No width has been given to the h1 so it takes the full width.

    You can use fit-content to make sure it is ‘elastic’.

    <style>
  .title h1 {
    text-align: center;
    font-family: 'Namecat';
    color: #e20c70;
    font-size: 70px;
    filter: none;
    border: 4px solid #d10459;
    letter-spacing: 5px;
    border-radius: 20px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin: auto;
    box-shadow: 0 0 0.2rem #fff, 0 0 0.1rem #fff, 0 0 1rem #d10459, 0 0 0.3rem #d10459, 0 0 1.8rem #d10459, inset 0 0 0.2rem #d10459;
    width: fit-content;
  }
</style>
<div class="title">
  <h1>Title</h1>
  <h1>Longer title</h1>
  <h1>Very Very Very Very Very Very Very VeryVery Very Very VeryVery Very Very VeryVery Very Very VeryVery Very Very VeryVery Very Very VeryVery Very Very VeryVery Very Very VeryVery Very Very VeryVery Very Very Very Long title</h1>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search