Content being cut off on mobile..

fobovox · Nov 3, 2022

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

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

Search

Search

Content being cut off on mobile..

fobovox

New member

Similar threads