How do I make a h1 and h3 only as wide as the text

Question

.main-heading {
  display: block;
  font-family: "Josefin-Sans", sans-serif;
  font-size: 70.6px;
  font-weight: bold;
  text-align: center;
  color: #ba9a45;
}

.subheading {
  font-family: "Cardo", sans-serif;
  font-size: 23.5px;
  text-align: center;
  color: #fff;
  padding-top: 30px;
}

<!-- Headings -->

<div>
  <h1 class="main-heading">ATLANTIC</h1>
  <h1 class="main-heading">CASINO</h1>
  <h3 class="subheading">FEED YOUR DESIRES</h3>
</div>

I seem to not be able to make my h1 and h3 background only as wide as the text and not span the whole width of the line.

How can I reduce the background of the h1 and h3 so it only spans to the end of the text?

--

I've managed to resolve my issue by taking into consideration all the advice given by users below.

Have a look at my revised code which works:

<div class="title-headings">
  <h1 class="main-heading">ATLANTIC</h1>
  <h1 class="main-heading">CASINO</h1>
  <h3 class="subheading">FEED YOUR DESIRES</h3>
</div>


.main-heading{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  font-family: "Josefin-Sans", sans-serif;
  font-size: 70.6px;
  font-weight: bold;
  color: #ba9a45;
}

.subheading{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  font-family: "Cardo", sans-serif;
  font-size: 23.5px;
  color: #fff;
  padding-top: 30px;
}

`h1{width:max-content;}` vould do. Or `h1{display:table;}`. 2 ways to keep it à block element. — G-Cyrillus, Aug 28 '20 at 14:18

score 2 · Answer 1 · answered Aug 28 '20 at 14:34

2

Headings (<h1>, <h2>, ...) are block-level elements (display: block); if you want these to only take up as much space as the text is, you should set these to display: inline.

answered Aug 28 '20 at 14:34

uncleserb

39
4

... side by side in the end. Is this what the op asked for? – G-Cyrillus Aug 28 '20 at 14:56
Have a look at my revised code with the solution I desired above in my question description. – derrickogole Aug 28 '20 at 15:08

score 2 · Answer 2 · answered Aug 28 '20 at 16:44

2

You can easily do it by:

.element{
    display: inline-block
}

It will now take up only the width it is supposed to take!

answered Aug 28 '20 at 16:44

Harsh Goel

166
1
7

gavgrif · Answer 3 · 2020-08-28T14:43:08.927

Whilst the comments and other answers are correct in that - display : inline-block is the correct answer if the text was to be on one line, they do not address the fundamental semantic flaw in the code - you should have only one h1 element and for that to be followed by a h2.

It is important to maintain the correct hierarchy or headings in your page structure.

The way that I would do this is to have the h1 to be display: inline-block and within that to have spans for each word - and to have these spanss a display: block so that they are on separate lines.

Note that I added a red border to demonstrate the layout. And also added a text-align: center to the wrapping div to allow al lthe text to be centered.

div {
  text-align: center;
}

.main-heading {
  display: inline-block;
  font-family: "Josefin-Sans", sans-serif;
  font-size: 70.6px;
  font-weight: bold;
  color: #ba9a45;
  border: solid 1px red
}

.main-heading span {
  display: block;
 }

.subheading {
  font-family: "Cardo", sans-serif;
  font-size: 23.5px;
  text-align: center;
}

<!-- Headings -->

<div>
  <h1 class="main-heading">
    <span>ATLANTIC</span>
    <span>CASINO</span>
  </h1>
  <h2 class="subheading">FEED YOUR DESIRES</h2>
</div>

I have taken on board everything you said just by fiddling around with my code and this is my result. I just want my code to be as clean as possible. .main-heading{ display: block; margin-left: auto; margin-right: auto; width: max-content; font-family: "Josefin-Sans", sans-serif; font-size: 70.6px; font-weight: bold; color: #ba9a45; } .subheading{ display: block; margin-left: auto; margin-right: auto; width: max-content; font-family: "Cardo", sans-serif; font-size: 23.5px; color: #fff; padding-top: 30px; } — derrickogole, Aug 28 '20 at 14:50
What I've basically done is use my classes .main-heading and .subheading to make my content have a max-width of content - not needing to target h1 or h3 specifically in my css. And I have also retained the centre alignment of my content by using margin auto. — derrickogole, Aug 28 '20 at 14:56

score 0 · Answer 4 · answered Aug 28 '20 at 14:31

To make a block HTML element not span the full width of its container, change its style.display property to inline-block.

You can do it with CSS like this:

display: inline-block

If you wanted to do it in the element itself, the equivalent would be: style="display: inline-block;"

score 0 · Answer 5 · answered Aug 28 '20 at 14:32

On .main-heading change display:block; to display:inline-block;

.main-heading {
  display: inline-block;
  font-family: "Josefin-Sans", sans-serif;
  font-size: 70.6px;
  font-weight: bold;
  text-align: center;
  color: #ba9a45;
}

.subheading {
  font-family: "Cardo", sans-serif;
  font-size: 23.5px;
  text-align: center;
  color: #fff;
  padding-top: 30px;
}

<div>
  <h1 class="main-heading">ATLANTIC</h1>
  <h1 class="main-heading">CASINO</h1>
  <h3 class="subheading">FEED YOUR DESIRES</h3>
</div>

How do I make a h1 and h3 only as wide as the text

5 Answers5