CODEWITHSUNDEEP
cssresponsive
Amodio De Cicco
Amodio De Cicco

Reputation: 87

making web site responsive

I am working on this web site: https://www.citysingle.it and I'm trying to make it responsive.

the main problem is that when seen by any device, the page is still wide, i added this code on the CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px; 
  /* font-size: 1em; */
  line-height: 1.42857143;
  color: #333333;
  background-color: #ffffff;
  /* mauro 
    min-width: 80em;*/
}
@media only screen and (min-width: 800px) {
    body {
        min-width: 0;
    }
}

@media only screen and (min-width: 1024px) {
    body {
        min-width: 80em;
    }
}

Upvotes: 0

Views: 71

Answers (1)

Kishan Patel
Kishan Patel

Reputation: 509

Add this 3 meta tags in your head part of the html

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

The viewport Meta tag alters the behavior of a mobile browser by modifying the "virtual viewport" of the device. The virtual viewport is the view of a mobile device screen that is other than the default view; therefore being deemed "virtual". This allows the screen on devices to have specified zoom behaviors.

<meta name="viewport" content="width=device-width">

This Meta tag tells the mobile device to not zoom. This allows the Responsive Template for mobile devices to be loaded in the scripts.

Upvotes: 3

Related Questions