Почему этот текст перекрывает значок с моими текущими настройками в мобильной версии? - PullRequest
Новая
       12

Почему этот текст перекрывает значок с моими текущими настройками в мобильной версии?

0 голосов
/ 08 марта 2019

Я работаю над этим нижним колонтитулом, и он работает не так, как я хочу. По сути, теперь проблема заключается в том, что, как только я перехожу с настольного компьютера на меньшее мобильное разрешение, которое я выбрал, чтобы два изображения исчезло, одно в настоящее время остается. Вот так> 1001 *

Desktop Ряд 1 - левое изображение, центральное изображение - правое изображение Строка 2 - централизованный текст.

Но когда я иду на мобильник, я хочу (!!), чтобы он стал таким ROW 1 / Центр imgae Строка 2 / Централизованный текст

Тем не менее, когда он становится меньше, все становится сетчатым, поэтому текст накладывается на центральное изображение. Я мог бы потенциально скрыть это, но было бы здорово, если бы это могло оказаться под. Вот код, который я использую. 

<!DOCTYPE html>
<html>
<head>
<style>

.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: #5C6568;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 5px;
  margin-left: 0px;
    margin-right: 0px;
  text-align: center;

  line-height: 25px;
  font-size: 30px;
  background:#5C6568;
}
.flex-container2 > div {
  background-color: #f1f1f1;
  margin: 5px;
  color: white;
  margin-left: 0px;
  text-align: center;
  line-height: 75px;
  font-size: 15px;
  font-family: Cardo;
  background:#5C6568;
}

footer #footer-riba {
    left: 7cm;
}
footer #footer-intbau {
    right: 7cm;
}

@media only screen and (max-width:768px){
   #footer-riba, #footer-intbau, #pinkriba, #footer-mega-col-wrap, #flex-container2 {
    display: none;
  }}

</style>
</head>
<body>

<div class="flex-container">
  <div><img id="footer-riba" src="https://test3.rental-academy.com/wp-content/uploads/2019/01/INTBAU-v3-same-size-as-RIBA-01-300x79.png"></div>
  <div> <center><img id="greylogo" src="https://test3.rental-academy.com/wp-content/uploads/2019/03/John-Simpson-Architects-Logo-Transparenthalf-01.png"></center></div>
  <div><img id="footer-intbau" src="https://test3.rental-academy.com/wp-content/uploads/2019/01/ribaWhite2-300x79.png"></div>  
</div>
<div class="flex-container2">

  <div>JOHN SIMPSON ARCHITECTS LTD. | 29 Great James St, London WC1N 3ES, UK | +44 20 7 405 1285 | info@johnsimpsonarchitects.com | <a href="https://www.linkedin.com/company/john-simpson-architects-london-limited" style="color: white">linkedin</a></div> 
</div>
</body>
</html>

<footer>
      
</footer>

1 Ответ

0 голосов
/ 08 марта 2019

Я заметил, почему сейчас! Поэтому, прежде чем я централизовал его, используя center-command (center png), но после удаления окружающих его и использования flex, они сделали это ненужным. Удаление тех заставило это работать отлично!

...