html css issue on mobile device

Question

For the header of this site http://new.931thefan.com/ I would like Listen Live to go below the logo when viewing on a mobile device. Right now when viewing on a mobile device the listen live icon is overlapped by the logo.

This code is working fine by itself, but when I place into the WordPress theme it doesn't work

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 }
            }

Any thoughts on how I could make this work?

Answer 1

Don't absolutely position the logo...

This is how it is set now:

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

Remove "absolute" and adjust the surrounding elements and backgrounds as needed.

Answer 2

On a mobile device, your two divs will have to switch places. Now there are many ways to do this. There is the CSS option, then there is jQuery and undoubtedly also ways in PHP.

You could make another div below the log and place the listen live button in there as well. Set it to display: none except for mobile devices.

You could also switch the two divs around using jQuery. Check this: Switch positions of 2 divs with jQuery

Let me know if you have any questions.

Answer 3

using bootstrap in your css might help you with this very easily. Put the top three elements in a seperate div with classes:

<div class="col-md-4 col-sm-4 col-xs-4">

then you can seperately position the elements in the div