0

I created this http://nl4.christianity24.org/ using PHP and mysqli, with CSS 3. I got website mobile friendly with Android opera but can't get it friendly on Android Chrome and Firefox. What am I suppose to do.

Like use @media(); what is the best CSS 3 format for mobile view point?

Zoe
  • 27,060
  • 21
  • 118
  • 148
Marshall Unduemi Josiah
  • 23
  • 1
  • 2
  • 9

1 Answers1

0

To ensure proper rendering and touch zooming for all devices try adding this meta tag in the <head> of your document.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Then you can customize your website using various media queries like this.

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) {
    body {
        background-color: red;
    }
}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) {
    body {
        background-color: yellow;
    }
}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {
    body {
        background-color: blue;
    }
}

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
    body {
        background-color: violet;
    }
}

Hope this will help.

Praveen Murali
  • 701
  • 3
  • 9