为什么此文本与我在移动版本上的当前设置重叠图标？答案

【问题标题】：Why does this text overlap the icon with the my current setup on the mobile version?为什么此文本与我在移动版本上的当前设置重叠图标？
【发布时间】：2019-07-30 16:22:32
【问题描述】：

我正在处理这个页脚，但它往往无法按照我想要的方式工作。基本上，现在的问题是，一旦我从桌面转换到较小的移动分辨率，我制作的两张图像就会消失，而现在则留下一张。原来是这样的>

桌面第 1 行 - 左图，中图 - 右图第 2 行 - 集中文本。

但是当我使用手机时，我想要（！！）它变成这样 ROW 1 / 中心图像第 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>

【问题讨论】：

标签： wordpress footer

【解决方案1】：

我现在才注意到为什么！因此，在我使用 center-command（中心 png）集中它之前，但在删除它周围的那些并使用 flex 之后，那些使它不需要。删除那些使它工作正常！

【讨论】：