This is how it looks on web
This is how it looks on mobile
标头文字不会显示在移动设备上。有什么原因吗?
我是CSS的新手。以下是我添加的自定义CSS:
预先感谢。
更新- 也添加了html。抱歉,请耐心等待,如果没有更多说明,似乎无法添加多行代码。
更新2 - 添加了2个屏幕截图,其中包含2种不同字体的按钮在手机上的外观。为什么它没有出现?
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>
答案 0 :(得分:0)
为什么在移动设备中隐藏标题的问题可能是因为您在不知不觉中添加了CSS来隐藏它们。 我在标题元素中添加了内联css。请检查以下代码,看看是否可以解决问题。 如果您可以共享网站URL,那就更好了。好像您已经用密码保护了网站。如果您可以删除主页的密码保护,那么我们可以在几分钟内解决此问题,然后您可以重新启用它。
<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>