How to force Hero Frame subtitle at the bottom of background image?

How To
1

Hi,

I love the Hero Header option to show various illustrations on the landing page but the Title / Subtitle is usually covering the image at the worst place (top and mid-height) especially when it comes to image description.

How can I force the Title / Subtitle to be moved to the bottom of the background image? I tried with inline CSS; but the containers of Title and Subtitle do not seem to reach the bottom of the page. They just adapt to the content.

I saw on cern.ch/norway that they somehow manage to do it by adding 16 empty lines which works more or less OK but is clearly not an ideal solution.

Have a look on my site to get an idea of what I mean: http://cern.ch/test-belgium.

In my case, only the subtitle needs to be lowered as I have integrated the title in the subtitle part to avoid a centered title.

Thanks in advance for any help.

François

2

Hello Francois,

I requested access in the website to have a look so it will take some time until e-groups sync.

Until then, it is a known “issue” but in general this is how text in HTML by default works: top to bottom and left to right. So with the current configuration of the theme, the only way to override it is to add the spaces as you mention. However as far as I know this creates issues in responsive cases.

Either way I will have a look as soon as I have access to find a solution.

Konstantinos

3

Hi Konstantinos,

You should have admin rights now.

Best,

François

4

Hello Francois,

What we can do as solution is to make the subtitle hold 100% of the Hero Header’s height. As a result then you can use the vertical-align css property to place it on the top, middle or bottom of the header. What do you think of it as solution?

Konstantinos

5

Hi Konstantinos,

Yes, as I thought there is a need to expand the current container. That would work I guess.

Best,

François

6

Hi Konstantinos.

What would be next step? Are you going to make a modification? Should I do it in the override theme?

Best,

François

7

Hello Francois,

I am creating a ticket for that. If its urgent you can always fix it using CERN Override. I will post the ticket in the topic.

Konstantinos

8

Not that urgent but what’s your esitmation of time for it to be done?

François

9

I am currently testing it. I will answer for sure when I have a sure solution.

10

Hello again Francois,

I applied a fix so that the Frame subtitle to hold 100% of the height by default.

It will be deployed with version 2.7.1 of CERN Components. I cannot say for sure when it will be deployed, on my side it will be merged to production very soon (most probably next week).

If you cannot wait for the deployment, you can install the Release Candidate of version 2.7.1 locally until it is deployed on infra.

After it is deployed you can do something like the following:

<div style="position:absolute; bottom:0;">
<h1>This is a title inside the Hero Frame
<p>This is my subtitle text inside the Hero Frame</p>
</div>

and it will be placed at the bottom of the Frame.

Let me know if it works for you.

Konstantinos

11

Hi Konstantinos,

I have installed v. 2.7.1 of CERN Components (version seems correct in installed modules).
I have added the

tag. But it does not seem to work…

François

12

Did you clear the caches?

13

I cleared them and it seems to work

14

Hi Konstantinos,

Thanks. It works well on desktop. Not on mobile though.

François

15

Hello Francois,

I confirm that it does not work in some cases. I will push the fix and I will let you know

Konstantinos

16

I applied a fix for the cases where the height was not applied. You can pull the latest version of RC-v2.7.1

Also please let me know if you find more cases where the height is not applied.

Konstantinos

17

Hi Konstantinos!

It looks great. Thanks for your help.
I think this will help making even nicer Hero Frames.

Best,

François

1 Like