html - 移动设备上的HTML CSS问题

对于此网站的标题http://new.931thefan.com/
在移动设备上查看时，我希望Listen Live在徽标下方显示。对
现在，在移动设备上观看时，现场直播图标会与徽标重叠。

这段代码本身可以正常工作，但是当我将其放入WordPress主题时
不起作用

html

  <div class="wrapper">
<div id="one"><a href="http://new.931thefan.com">
                <img class=logo src="http://931TheFan.com/wp-   content/uploads/2015/05/fan-logo-header2.png" alt="93.1 The Fan" width="199px"  height="146px"/>
            </a></div>
    <div id="two"><a href="javascript:callLTR='WWSR-FM';grptuner='';file='';title='';ListenLive();" target="_self">ttest<img src="http://931TheFan.com/wp-content/uploads/2013/08/listen-live-fan.png" align="right" border="0"></a></div>
       </div>

的CSS

          .wrapper {
           border : 2px solid #000;
           overflow:hidden;
              }

         .wrapper div {
        min-height: 200px;
          padding: 10px;
       }
        #one {
        background-color: gray;
        float:left;
        margin-right:20px;
        width:300px;
        border-right:2px solid #000;
          }
        #two {
         background-color: black;
          overflow:hidden;
          margin:10px;
          border:2px dashed #ccc;
          min-height:170px;
              }

         @media screen and (max-width: 400px) {
         #one {
        float: none;
         margin-right:0;
         width:auto;
         border:0;
          border-bottom:2px solid #000;
            }
       IMG.logo {
        display: block;
        margin-left: auto;
         margin-right: auto }
            }

关于如何进行这项工作有任何想法吗？

最佳答案

不要绝对定位徽标...

现在是这样设置的：

   .logo {
        float: left;
        position: absolute;
        margin: 0px 0px 0px 0px;
    }

删除“绝对”并根据需要调整周围的元素和背景。