1

How can I make the main contents of a web page use the full width on a mobile device whilst using just a portion (say 60% of the width, centred) on a desktop?

This is what I have tried so far, HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
<body>
    ...
    <div id="container">
        <!-- Content goes here! -->
    </div>
    ...
</body>
</html>

CSS:

#container
{
    display: inline-block;
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
}
gornvix
  • 3,154
  • 6
  • 35
  • 74
  • Use `@media` rule. Ref: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp – Smit Mar 02 '17 at 16:29
  • Possible duplicate of http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile – Smit Mar 02 '17 at 16:31
  • Possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – Smit Mar 02 '17 at 16:31

1 Answers1

2

You should use @media queries here. As for your example, this should work i your css:

@media (max-width: 600px) {
  #container {
    width: 100%;
    margin: 0;
  }
}

600px - is an example maximum resolution of devices you need for fullwidth content to be shown.

You should learn a bit more about media queries and viewport meta tag.

PapaSoft
  • 53
  • 5