Why do the words of my
tag appear on top of each other despite responsive css setting?

Asked Jun 23 '22 at 19:28

Active Jun 23 '22 at 19:28

Viewed 53 times

I made this web app which seems to be functioning fine when I check its responsiveness in Chrome's Devtools Responsive modus (see photo 1), but when I open the site on a phone, the words of one of the <h1> elements stack on top of each other when the screen size shrinks (see photo 2 - screenshot taken from my iPhone 8).

The style settings of this element are the following:

h1 {
  font-variant: small-caps;
  font-size: clamp(1rem, 9vw, 4rem);
  padding: 0 1rem;
}

I tested it with different iPhones, both running in Chrome and Safari. The site runs from my GitHub page, does that have anything to do with the malfunctioning? Both my local version as the GitHub version seem fine in my computer browser when I check responsiveness.

Hope someone can enlighten me on this matter!

Here are the photos:

Photo 1: in Chrome DevTools - responsive mode

Photo 2: the malfunctioning mobile version

Here is also a link to the published version on GitHub Pages: go to site

asked Jun 23 '22 at 19:28

HelterStelter17

2

The line-height is 0. – Mr Lister Jun 23 '22 at 19:31
1

in another css part you have `line-height: 0` for `h1` (line 18). set it to `1` when the line height should match the font size – Sysix Jun 23 '22 at 19:31
Ok, I adjusted the line-height. Now wait for the GitHub Page to process the change and hope this small adjustment does it. Thanks in advance! – HelterStelter17 Jun 23 '22 at 19:36

Why do the words of my tag appear on top of each other despite responsive css setting?

tag appear on top of each other despite responsive css setting?

0 Answers0

Why do the words of my
tag appear on top of each other despite responsive css setting?