为什么此文本将图标与My当前设置重叠



我正在处理这个页脚,它往往不按照我想要的方式工作。基本上,现在的问题是,一旦我从桌面转到较小的移动设备,我制作了两个图像,目前将留下来。所以就像这个>

桌面第1行 - 左图,中心图像 - 右图第2行 - 集中文本。

,但是当我去手机时,我想要(!!)变成这样的第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>

我注意到了为什么!因此,在我使用中心命令(中心PNG)将其集中到它之前,但是在删除周围的人并使用flex之后,那些不需要。删除这些使其正常工作!

最新更新