What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Content being cut off on mobile..


New member
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....

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <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"/>

    <div class="hello">
      <div class="content">
        <div class="clock"></div>
        <span class="emily">Welcome.</span>


        <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>

<script src="time.js"></script>


@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;