Текст заголовка не отображается на мобильном телефоне - PullRequest
Новая
       22

Текст заголовка не отображается на мобильном телефоне

1 голос
/ 24 марта 2020

Вот так это выглядит в сети Вот как это выглядит на мобильном телефоне Текст заголовка не отображается на мобильном телефоне. Есть причина почему? Я новичок в css. Ниже пользовательский css, который я добавил: Заранее спасибо.

Обновление - Также добавлен html. Извините, потерпите меня, кажется, я не могу добавить больше нескольких строк кодов без дополнительного описания.

Обновление 2 - Добавлено 2 скриншота того, как кнопка выглядит на мобильном телефоне с 2 разные шрифты. Почему он не появляется?

Нажмите здесь, чтобы увидеть скриншот кнопки со шрифтом Gotham - не отображается Нажмите здесь, чтобы увидеть скриншот кнопки со шрифтом Grumpy 

//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>

1 Ответ

0 голосов
/ 24 марта 2020

Проблема, по которой заголовок скрыт в мобильном телефоне, может заключаться в том, что вы неосознанно добавили CSS, чтобы скрыть их. Я добавил inline 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>

enter image description here

enter image description here

...