Как масштабировать надпись в ящиках в мобильном представлении? - PullRequest
Новая
       17

Как масштабировать надпись в ящиках в мобильном представлении?

0 голосов
/ 06 июня 2019

Я настраиваю этот блог: wolpertinger.org, и у меня возникла проблема с разделом записей блога в мобильном представлении. Я пытаюсь заставить их вести себя так, как показано на ползунке сверху, но по какой-то причине надпись на коробках (например, «Писсапокалипсис - водный кризис в Новой Зеландии») не принимает нужного размера. Я просто хочу, чтобы он масштабировался соответствующим образом, чтобы текст в полях читался на телефоне так же, как на обычном экране ноутбука.

Это код, который я использую для раздела. Имейте в виду, что я новичок в HTML, поэтому код, вероятно, немного грязный. Это микс шаблона, копия вставки из других фрагментов и мои собственные вещи.

Во всяком случае, я бы очень признателен за любую помощь. Я немного поиграл с этим, но не могу понять, почему он не работает.

Спасибо

Chris 

.context {
    overflow: hidden;
    position: relative;
}

.image-wrap .image-info{
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.8
     -webkit-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;

}
.context:hover .overlay {
  opacity: 1;

.centered {
  text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

.boxed {
  border: 2px solid rgba(233,233,233,1.00) ;
    padding-left: 0px;
    padding-right: 0px;
    text-align: inherit;
  position:inherit;

}

.btn-outline-white123 {
    border-color: #fff;
    color: #fff;
    border-width: 2px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: .2em; }
   .btn-outline-white123:hover {
      background: #fff;
      color: #000; }
.btn {
  border-radius: 0; }
  .btn:hover, .btn:active, .btn:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none; }
<div class="context"> 
<div class="image-wrap">
<img id="imgdarkblog" src="images/NewZealand/16.jpg" width="80%" height="auto" alt="Image" class="img-fluid mx-auto d-block webkit-filter: brightness(100%)">
<div class= "image-info ">
<div id="div0" class="overlay">
<div class="centered boxed ">
<a href="Blog_Pissapocalypse.html" class="btn btn-outline-white123">
<span > The Pissapocalypse - New Zealand's water crisis</span>
  </a>
 </div>                   
</div>
</div>
</div>	
</div>
...