Different design for mobile and desktop

Question

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.

I have tried display function none and block in css.

HTML

<body>

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

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

  </div>

CSS

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


}

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.

is it necessary? Because I'm just creating the landing page to redirect the links. — Mohammad Umar, Mar 28 '19 at 10:32
No, I'm not using bootstrap. That's why I didn't specify it. — Mohammad Umar, Mar 28 '19 at 10:33
Without a [Viewport Meta tag](https://stackoverflow.com/a/14577751/746736) you will see the desktop version on mobile. — Turnip, Mar 28 '19 at 10:35

score 0 · Answer 1 · answered Mar 28 '19 at 10:33

You should give a try to media queries. This will allow you to manage your styles for all type of device.

Take a look at this, it's pretty well done :

the next code block is coming from this source

/* 
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

  //CSS

}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  //CSS

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

  //CSS

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

  //CSS

}

Different design for mobile and desktop

1 Answers1