Displaying Text on smaller screens

Question

I have the following code::

 //Changing text (function() { var quotes = $(".changed"); var quoteIndex = -1; function showNextQuote() { ++quoteIndex; var q = quotes.eq(quoteIndex).fadeIn(2300) if (quoteIndex < quotes.length - 1) q.delay(2300).fadeOut(2300, showNextQuote); } showNextQuote(); })();

 .changed { display: none; padding: 0; }.changed svg { width: auto; height: 2em; } #signature { stroke-dasharray: 1920; stroke-dashoffset: 1920; animation: sign 6.4s ease; animation-fill-mode: forwards; } @keyframes sign { to { stroke-dashoffset: 0; } } #hero h1 { margin: 0; display: flex; font-size: 64px; font-weight: 700; height: 1em; background: url("https://images.unsplash.com/photo-1517315003714-a071486bd9ea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YWVzdGhldGljJTIwd2FsbHBhcGVyfGVufDB8fDB8fA%3D%3D&w=1000&q=80") repeat; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media (min-width: 320px) { #hero>h1:nth-of-type(1) { display: inline-block; text-align: center; margin: auto; } #hero>h1:nth-of-type(2) { display: none; } } @media (min-width: 1024px) { #hero>h1:nth-of-type(1) { display: none; } #hero>h1:nth-of-type(2) { display: flex; margin: auto; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section id="hero"> <h1 style="margin-bottom: 16px"> Small Screen </h1> <h1 style="margin-bottom: 16px">Large <div class="changed"> <h1>&nbsp;Screen </h1> </div> <div class="changed">&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none"> <path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/> <path id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/> <path id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/> <path id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/> <path id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/> <path id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/> <path id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/> <path id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/> <path id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/> <path id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/> <path id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/> </svg></div> </h1> </section>

When you run the above code, open it in a new page, and inspect element it to be around 340 pixels, you will see the following output:

As you can see, the word Screen disappears for some reason. Why is the word Screen not appearing right under the word Small ?

Expected Output:

I would basically like this to be the output. Please ignore the centering of the text, I just want it to display. That is basically it. Thanks

Answer 1

Remove from #hero h1 line with height: 1em; .

When the screen becomes so narrow that the text has to wrap, background image tries to fill only this height.