How to make a one-page mobile version?

Question

css

The customer wanted the regular and mobile versions of the site to be completely different - if on the desktop it is a business card site, then on the mobile it is a one-page site.

The best thing I came up with was to de-facto delete 2 different sites inside different divs:

@media screen and (max-width: 37.499em) {

.site__main {
  display: none;
}
//Mobile version here
}

@media screen and (min-width: 37.5em) {

  .site__small {
    display: none;
  }
//Desktop version here
}

As I understand it, the problem here is promotion - the robot will see both versions of the content anyway. Am I right? Have you tried doing this?

Answer 1

There is such a thing
demo.mobiledetect.net
You can make two different sites directly.