Formatting Special Header H1

Thanks for the tip, but I’m using a Coloured Section width a full width image as background. In this section I want to use the Special Heading. Now I want this Special Centered Header just at the top.

I don’t see the option here to leave a screenshot and forget the appname to upload a screenshot ….

I have created a test page where you can see the Layerslider (top) and the Color Section with Special Header (bottom)

I would like to adjust the Special Header in the following way:

1) The background color (post-entry or av-special-headiung) needs to be full width instead of the fixed width
2) The Position of the av-special-heading (H1) needs to be at the bottom

I have tried to accomplish this on the following way:

.sn-sk-bgt .av-special-heading {
    background-color: rgba(41, 150, 204, 0.8);
}

But I’m not able to get the background-color full width and to the bottom,

Find the details in the Private section.

I have applied these changes, but still not full width …. I’m testing this on a large screen (1920).

I would like to have two options:

1) Background of the heading that is full with
2) Background of the heading that is equal to the text length

If the full with is not working – what is the trick to make the background equal to the text lenght?

Andy,

I will try to play with the numbers to het it fixed for the full width.

As an alternative, I would like to have the background just as wide as the text is.
The background text is behind the Header and the sub Header.
See there screenshot for a example: https://screencloud.net/v/rn54

I have established this ones to change the display: table to block – but I cannot find the right Div anymore….

Looking forward to your response

Nope – that was done via Layerslider. That is indeed as I would like to get when I use the Special Header. But with the css mods you have given to me, I’m still not getting the background to the entire full width. I can play with the settings, but I have my doubts what it will do with other smaller devices.

I have applied the following to my css now in order to make the background color size equal to the text size

.sn-sk-bgt .av-special-heading {
   background-color: rgba(106, 116, 127, 0.7);
   padding: 15px;
  <strong> display: table-cell;</strong>
}

Could you confirm that this indeed the right way that will work for all devices/browsers?

OK – I will investigate that further – thanks so far!

I still need some help with this.

I have created a test page where you will see the following

1) Layerslider – as an example that I would like to build with Color Section and Special Header

2) Color Section and Special Header
Here I would like to see that the background color is full with and the text in the center. The earlier given css mods are not given a full width background.
I’m using a background image – center center with Parallax effect!

3) Full width button
Is full width – text is the center – But I don’t want to have a link and I don’t want to have a hover effect here.

What is the trick to add some css to my Color Section and Special Header to get the heading text below in the Special Header width a full with background?

Would it be possible to add another div class just beneath the Special Header but position this then higher so the text will be merged with the background image from the Color Section?