How to make a span for heading banner with CSS

How to make a class for heading banner with the flexibility that Beaver builder or Elementor offers. All without using the page builder. It's just a plain row. First several tests that don't work out well. Especially responsive.

Testing to make a span for heading banner with CSS

First some tests with a H1 heading an a paragraph with this CSS:

h1.aw-banner-top-heading {
padding-top: 12vw;
padding-bottom: 1px;
color: #fff !important;

}

p.aw-banner-top-text-sub {
padding-top: 1px;
padding-bottom: 4vw;
color: #fff;
font-size: 1.6em;
}

 

HTML looks like this:

<h1>Row demo 8 | html</h1>
<p>Dit is de samenvatting. Lorem ipsum. Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non suscipit egestas. Een tekst van 155-160 woorden.</p>

 

Problem it never works well responsive.

Row test 1 | html

Dit is de samenvatting. Lorem ipsum. Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non suscipit egestas. Een tekst van 155-160 woorden.

Row test 2 | html

Dit is de samenvatting. Lorem ipsum. Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non suscipit egestas. Een tekst van 155-160 woorden.

The solution to make a span for heading banner with CSS

Use a div module and use the html and CSS below. The text perfectly aligns with the container width. The width is calculated so it looks well responsive too. The padding-top is calculated to be more flexible with transparent headers.

This is a heading by Arthur

Dit is de samenvatting. Lorem ipsum. Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non suscipit egestas. Een tekst van 155-160 woorden.

Some text here

CSS

h1.aw-banner-top-heading-intro {
color: #fff !important;
}
p.aw-banner-top-text-intro {
color: #fff;
font-size: 1.6em;
}
.aw-banner-top-collect-box {
max-width: calc(1200px + 4em);
margin: auto;
padding-top: calc(200px + 4em);
padding-bottom: 2vw;
padding-left: 2em;
padding-right: 2em;
}

html (html module)

<div>
<h1>This is a heading by Arthur</h1>
<p>Dit is de samenvatting. Lorem ipsum. Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non suscipit egestas. Een tekst van 155-160 woorden.</p>
<p>Some text here</p>
</div>

This is a heading by Arthur

Dit is de samenvatting. Lorem ipsum. Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non suscipit egestas. Een tekst van 155-160 woorden.

Some text here

Title heading H1 with a span

Same html and CSS as above but class added for improved SEO.

.aw-bann-intr {
color: #fff;
font-size: 0.6em;
display: block;
}
<div>
<h1>WordPress Bootcamp <span>all-in-one spoedcursus</span> </h1>
<p>Dit is de samenvatting. Lorem ipsum. Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non suscipit egestas. Een tekst van 155-160 woorden.</p>
<p>Some text here</p>
</div>

WordPress Bootcamp all-in-one spoedcursus

Dit is de samenvatting. Lorem ipsum. Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non suscipit egestas. Een tekst van 155-160 woorden.

Some text here