标题文本未出现在移动设备上

Question

This is how it looks on web
This is how it looks on mobile
The header text does not appear on mobile. Any reason why? I'm new to css. Below is the custom css I've added: Thanks in advance.

Update - Added the html as well. Sorry, bear with me, can't seem to add more than a few lines of codes without more description.

Update 2 - Added 2 screenshots of how a button looks on mobile with 2 different fonts. Why is it one doesn't appear?

Click here to see screenshot of button with Gotham font - doesn't appear
Click here to see screenshot of button with Grumpy font

 //ADDING FONTS// @font-face { font-family: 'GRUMPY'; src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703047b02883185a0fed19/1584410695558/Grumpy+Black48.otf'); } @font-face { font-family: 'GOTHAM-MEDIUM'; src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e70326a8ddd1113d8ead425/1584411243146/GothamMedium.ttf'); } @font-face { font-family: 'GOTHAM-BOOK'; src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703fe01356f60cd4de3565/1584414689162/GothamBook.ttf'); } //SETTING TYPEFACE// h1 { font-family: 'GRUMPY'; font-size: 7vh; } h2 { font-family: 'GOTHAM-MEDIUM'; font-size: 7vh; } h3 { font-family: 'GOTHAM-MEDIUM'; font-size: 5vh; } h4 { font-family: 'GOTHAM-MEDIUM'; font-size:4vh; } p { font-family:'GOTHAM-BOOK'; font-size: 2.2vh !important; } body { font-family:'GOTHAM-BOOK'; font-size: 2.2vh !important; }

 <div class="content"> <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-5e6f422ffd82d42cb292dd66"> <div class="row sqs-row"> <div class="col sqs-col-12 span-12"> <div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-592cf9f5c18d780deacb"> <div class="sqs-block-content"> <h2 style="text-align:center;white-space:pre-wrap;"><strong>New Beach Collection</strong></h2> </div> </div> <div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-4b700310cae983fab358"> <div class="sqs-block-content"> <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small"> <a href="/shop" class="sqs-block-button-element--small sqs-block-button-element">Shop Now</a> </div> </div> </div> </div> </div> </div> </div> </div> </section>

Answer 1

The issue why the Heading is hidden in Mobile, might be because you have unknowingly added CSS to hide them. I have added inline css to the heading element. Kindly check the below code and see if this solves the issue. It would be better if you can share the website URL. Seems like you have password-protected the website. If you can remove the password protection for homepage, we can solve this issue in minutes then you can re enable it.

 <style> //ADDING FONTS// @font-face { font-family: 'GRUMPY'; src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703047b02883185a0fed19/1584410695558/Grumpy+Black48.otf'); } @font-face { font-family: 'GOTHAM-MEDIUM'; src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e70326a8ddd1113d8ead425/1584411243146/GothamMedium.ttf'); } @font-face { font-family: 'GOTHAM-BOOK'; src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703fe01356f60cd4de3565/1584414689162/GothamBook.ttf'); } //SETTING TYPEFACE// h1 { font-family: 'GRUMPY'; font-size: 7vh; } h2 { font-family: 'GOTHAM-MEDIUM'; font-size: 7vh; } h3 { font-family: 'GOTHAM-MEDIUM'; font-size: 5vh; } h4 { font-family: 'GOTHAM-MEDIUM'; font-size:4vh; } p { font-family:'GOTHAM-BOOK'; font-size: 2.2vh !important; } body { font-family:'GOTHAM-BOOK'; font-size: 2.2vh !important; } </style> <div class="content"> <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-5e6f422ffd82d42cb292dd66"> <div class="row sqs-row"> <div class="col sqs-col-12 span-12"> <div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-592cf9f5c18d780deacb"> <div class="sqs-block-content"> <h2 style="display:block !important;visibility:visible !important;text-align:center;white-space:pre-wrap;"><strong>New Beach Collection</strong></h2> </div> </div> <div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-4b700310cae983fab358"> <div class="sqs-block-content"> <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small"> <a href="/shop" class="sqs-block-button-element--small sqs-block-button-element">Shop Now</a> </div> </div> </div> </div> </div> </div> </div> </div> </section>