H1 title is still small

Kirby 2 Solved ✅
1

Hello

So i’m converting a simple template right now, and i have this is my header intro section:

<!-- Header -->
<header id="header">
  <div class="intro">
    <div class="container">
      <div class="row">
        <div class="intro-text">
         <h1>Magnum</h1>
          <hr>
          <p>Graphic Design • Illustration • Photography</p>
          <a href="#about" class="btn btn-default btn-lg page-scroll">Learn More</a> </div>
        </div>
      </div>
    </div>
</header>

but when i change:

<h1>Magnum</h1>

to:

<h1><?php echo $page->headertitle()->kirbytext() ?></h1>

it looks like that:

So in the style.css i found this code:

h2, {
	margin: 0 0 20px 0;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	font-size: 30px;
}
h3, h4 {
	color: #222;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 1px;
}
h5 {
	text-transform: uppercase;
	font-weight: 700;
	line-height: 20px;
}

and i try to add a h1 section whit the same css code, but that doesent helps.
Do you have any ideas?

TheSmithy

2

There’s a syntax error in your code:

Instead of

</h1><?php echo $page->headertitle()->kirbytext() ?></h1>

it should be

<h1><?php echo $page->headertitle()->kirbytext() ?></h1>
3

ups, yes but in the template its:

<h1><?php echo $page->headertitle()->kirbytext() ?></h1>
4

Oh, yes, and it should be:

<h1><?php echo $page->headertitle()->html() ?></h1>

The kirbytext() method introduces a p tag.

5

Oh :disappointed_relieved: thanks you.

oh thats a very good to know ! thanks a lot

6

As a general reminder, you should always look at what HTML code you generate. There are three important layers:

  1. Your PHP template.
  2. The generated HTML code (use your browser’s “View Source” view, Ctrl/Cmd+U in most browsers).
  3. The document tree as understood by the browser after parsing the HTML (and possibly executing some JavaScript code). You can see that one by using “Inspect Element” in your browser.

You generally don’t need to check all three layers all the time, but in front of an error it can be useful to do just that. :slight_smile: For instance in your case:

<!-- PHP source -->
<h1><?php echo $something ?></h1>

<!-- HTML result -->
<h1><p>Something</p></h1>

<!-- Document tree -->
<h1></h1>
<p>Something</p>

The P element is illegal inside a H1, so the browser closes the H1 immediately, then you have a paragraph, and finally it discards the </h1> closing tag (which is now matched with nothing, since the H1 is already closed).

2 Likes
7

Thanks you :blush: !

8

And finally, there’s a typo in you CSS;

h2, {
	margin: 0 0 20px 0;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	font-size: 30px;
}

The comma (,) after h2 shouldn’t be there - it’s invalid, so the styling is not declared (browser dependent).

1 Like
9

Thanks you :blush:, i will fix that !

10

Of course, in addition to not having p elements inside heading elements, you can’t use p elements inside other p elements. So something like this

<p><?= $page->title()->kirbytext() ?></p>

would result in

<p><p>Something</p></p>

which is of course invalid as well.

You can use a validator like this one to check if your resulting HTML code is valid.

1 Like
11

Thanks for the Help :slight_smile:

12

@texnixe is

<?= $page->title()->kirbytext() ?>

a shorter version for

 <?php echo $page->title()->kirbytext() ?>
13

Yes, that’s correct. Those two code snippets mean exactly the same. :slight_smile:

14

Thats cool, thanks :blush:, can i find any informations in the docs about that?, because i still find nothing.

15

That’s not specific to Kirby, but a PHP feature. Since PHP 5.4, this feature is enabled by default. So you can use it for your Kirby sites without thinking about it. :slight_smile:

1 Like