i'm refreshing some of html skills after not doing it for quite a while (and learning the new stuff for supporting mobile devices/smaller screens).
i've knocked up a basic page with a logo, a heading and a paragraph of text. (
http://ctspalmtop.uk)
the text is inside a div with a set width of 500px, which is centered in the page, and with the text justified.
it looks all fine on a desktop web browser (html5 validated).
however when i view it on a mobile device, it doesn't seem to align properly.
i used
<meta name="viewport" content="width=device-width, initial-scale=1.0">
which should make the page zoom in to fit the screen size, but it seems to zoom in correctly, but the text requires side scrolling to see it all (i assume this is due to the div width being 500px).
what is the correct way to code this so that it views correctly? (i know i could just remove the viewport line but that would result in the mobile devices having to manually zoom in to see it).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#263d81">
<meta name="apple-mobile-web-app-status-bar-style" content="#263d81">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans"/>
<link rel="stylesheet" href="/includes/css/test.css"/>
<link rel="icon" type="image/png" href="/includes/images/favicon.png">
<link rel="apple-touch-icon" href="/includes/images/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="/includes/images/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="167x167" href="/includes/images/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="/includes/images/touch-icon-iphone-retina.png">
<link rel="icon" sizes="192x192" href="/includes/images/android-icon.png">
<meta name="msapplication-square310x310logo" content="/includes/images/microsoft-icon.png">
</head>
<body>
<div class="main">
<img src="/includes/images/dummy.jpg" alt="Company Logo">
<br/><br/>
<h1>Heading</h1>
<br/>
<div class="lorem">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orci. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Pretium lectus quam id leo in. Morbi leo urna molestie at elementum eu facilisis sed. Etiam erat velit scelerisque in dictum non consectetur. Eu non diam phasellus vestibulum lorem sed. Blandit turpis cursus in hac habitasse platea dictumst. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Nibh tellus molestie nunc non blandit massa. Ultricies mi eget mauris pharetra. Morbi blandit cursus risus at ultrices mi tempus. Eget aliquet nibh praesent tristique magna sit amet purus.
</div>
</div>
</body>
</html>
body {margin:0;padding: 0;font-family: 'Noto Sans', sans-serif;}
h1 {font-size: 150%;}
h2 {font-size: 110%;text-align: center;}
a {text-decoration: none;color: #000000;}
a:hover {text-decoration: underline;color: #000000;}
a.logout {text-decoration: none;color: #0000FF;}
.main {clear: both;padding-top: 52px;padding-left: 0px;text-align: center;}
.lorem {width: 500px;margin: auto;text-align: justify;}