Superimposed text

On the header, you need to add box-sizing: border-box to fix the width and add margin: auto to centre it.

1 Like

Great!

One problem solved; another crops up: the image is not responsive!

In what way?

When you narrow the screen the sides of the image disappear, rather than being able to see the whole image all the e way through albeit smaller

Is that a problem? If they never saw the whole thing, they won’t miss it :wink:
The aspect ration of the header changes so cropping must occur.
If you use Coothead’s method, the aspect is fixed, but the text gets too small to read.
If you go back to my codepen, I added an extra line for the text size which makes it adjust to size, but not too much. That may work in combination with Coothead’s method.
But the problem with that approach it text and images respond differently.
As width decreases, with an image height decreases. But with text the height increases as width decreases (due to word wrap).
To avoid this, Coothead makes to text scale the same as the image, but it gets too small on mobile size.

2 Likes

I get your point. let me park the current work before lokking again at coothead’s, and make some decision in the end.

many thanks

I tried out some further tweaks to reduce the change in aspect ratio for the header.
In the css for #header add this for responsive text size.

font-size: calc(0.6em + 2vw);

But do keep the other size setting too (must come before this one), for old browsers where the above does not work.
To further reduce the aspect shift, make the text margins more responsive.

#header h1, #header p { margin: 2% 0 }

There will still be a change in aspect, but it is less than before.

If you don’t like that, you have two choices:-

a. Have a fixed aspect full image and text that is too small to be readable.
b. Suffer some cropping of the background image and have responsive text readable on any screen.

I will leave it to your judgement which is best. :slight_smile:

Thanks Sam

I can’t remember why but this was not copied across to my stylesheet

 /* Fall-back text size for old browsers */
  font-size: calc(0.6em + 2vw);
  /* Responsive text size */

Do you n ow mean that I should have it included, not as a comment and add the new line, like this?

  font-size: calc(0.6em + 2vw);
font-size: calc(0.6em + 2vw);

but that’s the same…

I did not have that in the original pen, I added it later as an enhancement.
When I say keep the other size setting, I mean:-

font-size: 1.6em; /* Fall-back text size for old browsers */
font-size: calc(0.6em + 2vw); /* Responsive text size */

Old browsers will use the fixed 1.6em. New browsers will have dynamic size.
The comments are just there so you know what they are both for.

1 Like

I now have this inside #header

 font-size: 1.6em;
font-size: 1.6em; /* Fall-back text size for old browsers */
font-size: calc(0.6em + 2vw); /* Responsive text size */

You only need to say that once.

Yes, it looks good.

Just need to play with colours, now.

Many,many thanks

Sam

One question:

What is the reason for mixing .em with vw?

font-size: calc(0.6em + 2vw);

how does it translate in pixels?

Errm… who’s Dave?

2 Likes

I have no idea…

It’s a variable size, so its size in pixels will change depending on how wide the screen is.

1em = 16px (by default in most browsers) so:-

0.6em = 9.6px

1vw = 1% of Viewport Width (vw).

(0.6em + 2vw) = 9.6px + 2%

1 Like

Right! I though VW was an old camper…

Sorry for the mix-up!

If you use vw alone for text, it can get ridiculously small on mobile screens.

font-size: 3vw

So adding a set value to the proportional units means it can stay a reasonable size.

font-size: calc(0.6em + 2vw)

Can never be smaller than 9.6px plus some more, depending on screen size.

If a modile is 320px wide:-
2% of 320px = 6.4px
9.6px + 6.4px = 16px = 1em

If a laptop monitor is 1200px:-
2% of 1200px = 24px
9.6px + 24px = 33.6px = 2.1em

1 Like

Thanks

This was new code to me. Good lesson, today.

I also understood that only modern browsers understand this em + vw business, so your code below means that an old browser will read the first line and stay there because it cannot read the next; while a modern browser will read both but pass onto the last automatically.

many thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.