HI Guys..
I have created a simple startpage that works fine on my desktop & on my phone whenever it is in portrait. Whenever I hold my phone sideways in landscape, content at the top gets cut off & I am unable to scroll to view it. How can make my startpage scroll-able whenever I'm holding my phone sideways in landscape ?? I want the content to fit to the screen or at least to be able to scroll up & down to view it all whenever I'm holding my phone sideways. My code is below & I am hoping that someone here will be able to help me figure this out. Many thanks in advanced....
I have created a simple startpage that works fine on my desktop & on my phone whenever it is in portrait. Whenever I hold my phone sideways in landscape, content at the top gets cut off & I am unable to scroll to view it. How can make my startpage scroll-able whenever I'm holding my phone sideways in landscape ?? I want the content to fit to the screen or at least to be able to scroll up & down to view it all whenever I'm holding my phone sideways. My code is below & I am hoping that someone here will be able to help me figure this out. Many thanks in advanced....
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel=" shortcut icon" type="image/png" href="favicon.png"/>
<title>Startpage.</title>
</head>
<body>
<div class="hello">
<div class="content">
<div class="clock"></div>
<span class="emily">Welcome.</span>
<br><br>
<a href="https://www.protocol.com/" target="_blank">Protocol</a>
<a href="https://www.theverge.com/" target="_blank">The Verge</a>
<a href="https://www.wired.co.uk/" target="_blank">Wired</a>
<a href="https://techcrunch.com/" target="_blank">Tech Crunch</a>
<a href="https://www.engadget.com/" target="_blank">Engadget</a>
<a href="https://gizmodo.com/" target="_blank">Gizmodo</a>
<a href="https://venturebeat.com/" target="_blank">VentureBeat</a>
<a href="https://www.nhl.com/oilers" target="_blank">NHL</a>
<a href="https://www.championshockeyleague.com/" target="_blank">CHL</a>
</div>
</div>
<script src="time.js"></script>
</body>
</html>
CSS:
@font-face {
font-family: 'Chloe';
src: url('Chloe-Regular.woff2') format('woff2'),
url('Chloe-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
html, body {
background-color: #e54865;
color: #E5B680;
margin: 0px;
user-select: none;
-moz-user-select: none;
weidth: 100vw;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
.hello {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: "Chloe";
font-size: 44px;
font-weight: 800;
letter-spacing: 2px;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
text-align: left;
}
.clock {
font-family: Chloe;
letter-spacing: 4px;
font-size: 44px;
}
span.emily {
color: #f2f2f2;
font-family: "Chloe";
font-size: 88px;
font-weight: 800;
letter-spacing: 8px;
}
a {
text-decoration: none;
color: #f2f2f2;
display: block;
margin: .4em 0em;
}
a:hover {
color: #E5B680;
}
a:hover:after {
content: " ♡ ♡ ♡ ♡";
font-size: 22px;
}
