Different design for mobile and desktop : <p>I have two different design for mobile and desktop. When I tried to restore the chrome then the mobile version looks good but when I check on the phone it didn't show me at all. The desktop version is all clear. </p>

<p>I have tried display function none and block in css. </p>

<p>HTML</p>

<pre><code>&lt;body&gt;

   &lt;div class="row" &gt;
    &lt;div class="column"&gt;
      &lt;img src="logo.png" style="position: absolute; padding-top: 15%;"&gt;
    &lt;/div&gt;
    &lt;div class="column1"&gt;
      &lt;img src="new.png" style="position: fixed;z-index: -1"&gt;
      &lt;div class="links"&gt;
        &lt;h1&gt;&lt;a href="http://okdateme.com" target="_blank"&gt;FIND A PARTNER&lt;/a&gt;&lt;/h1&gt;
        &lt;h1&gt;&lt;a href="https://stayaunty.com" target="_blank"&gt;BOOK A ROOM&lt;/a&gt;&lt;/h1&gt;
        &lt;h1&gt;&lt;a href="https://www.thatspersonal.com/" target="_blank"&gt;EXPLORE YOUR FANTASIES&lt;/a&gt;&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="mobile"&gt;
    &lt;img src="logo.png" style="width: 100%;"&gt;
  &lt;div&gt;
    &lt;img src="new.png" style="width: 100%; position: absolute; z-index: -1; margin-top: -25px;"&gt;
    &lt;h2&gt;&lt;a href="http://okdateme.com"&gt;FIND A PARTNER&lt;/a&gt;&lt;/h2&gt;
    &lt;h2&gt;&lt;a href="https://stayaunty.com"&gt;BOOK A ROOM&lt;/a&gt;&lt;/h2&gt;
    &lt;h2&gt;&lt;a href="https://www.thatspersonal.com/"&gt;EXPLORE YOUR FANTASIES&lt;/a&gt;&lt;/h2&gt;
  &lt;/div&gt;

  &lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>body
{
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #000;
}

.row:after{
    clear:both;
  background-color: #000;
}

.column { 
  width: 33.33%;
  float: left;
}

.column1 {
  width: 66.66%;
  float: right;
  position: relative;
}

.links{
    font-family: Comic Sans MS;
    margin-top: 30%;
}


a{
    text-decoration: none;
    color: #cc3366;
    z-index: 9999;  
    position: relative;
    background-color: #000;
}

@media(min-width: 768px){
  .mobile{
    display: none;
  }
}

@media(max-width: 767px) {
  .row:after, .column, .row{
    display: none;
  }
}

@media (max-width: 767px) {
  div.row, .column, .column1{
    display: none;
  }

.mobile{
  display: all;
}

a{
  color: #fff;
  background-color: #999900;
  font-family: Comic Sans MS;
}


}
</code></pre>

<p>My desktop version is looking good but the desktop version is also coming to mobile. But I have tried a different mobile design and hide the desktop on the mobile.</p>
