I have an issue with my website where whitespaces render outside the HTML tag borders on mobile. The issue is on mobile only and the same thing happens when the mobile chrome browser is set to desktop mode on mobile.
This is how the website loads initially on mobile but the scroll is going way past the viewport of the HTML tags.
The thing I don't understand is the website removes the whitespace if the client rotates from portrait to horizontal and back. As I use the same static template on all webpages the issue persists throughout the whole website.
The website is: Zefir.codes
Website uses:
Heres the template for the static webpages:
<html>
<head>
<title>A Hacker's world</title>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/index-min.css">
<link rel="stylesheet" href="css/animate.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section class="section">
<div class="container">
<a href="index.html"> <h1 class="title animated pulse">
Zefir Repository <img src="img/logo.png" width="150px" height="150px" align="right">
</h1>
<p class="subtitle animated bounceInRight">
A <strong>Hacker's</strong> World
</p>
</a>
</div>
</section>
<br/>
<div class="container is-widescreen">
<div class="tabs is-small animated lightSpeedIn">
<ul>
<li><a href="Tutorials.html">Tutorials</a></li>
<li><a href="Projects.html">Projects</a></li>
<li><a href="me.html">About me</a></li>
</ul>
</div>
</div>
<br/>
<!--Page Content-->
<div class="animated zoomIn">
<div class="container is-fluid">
<!--Culomn start-->
<div class="columns">
<!--first Column-->
<div class="column is-one-quarter">
</br>
<p class="title">
Updates
</p>
<!--Notify03-->
<div class="card">
<header class="card-header">
<p class="card-header-title">
A rebirth of the website!
</p>
<a href="#" class="card-header-icon" aria-label="more options">
</a>
</header>
<div class="card-content">
<div class="content">
The website is coming back and strong!
<br>
<time datetime="2020-05-15">22:04 - 15 May 2020</time>
</div>
</div>
</div>
</div>
<!--second Column-->
<div class="column">
</br>
<p class="title">
News
</p>
<div class="card">
<header class="card-header">
<p class="card-header-title">No News
</p>
<a href="#" class="card-header-icon" aria-label="more options">
</a>
</header>
<div class="card-content">
<div class="content">...
<br>
<time datetime="2017-12-6">8:23 PM - 15 May 2020</time>
</div>
</div>
</div> <div class="card">
<header class="card-header">
<p class="card-header-title">No news </p>
<a href="#" class="card-header-icon" aria-label="more options"> </a> </header>
<div class="card-content"> <div class="content">... <br>
<time datetime="2017-12-6">8:23 PM - 15 May 2020</time> </div> </div></div>
</div>
</div>
</div>
<!--End of Content-->
</br>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
Zefir Repository is a collection of projects and tutorials by <strong><a href="https://www.linkedin.com/in/typicaljohan/">Jan Andersson</a></strong> Hosted on <strong>Infinityfree</strong>.
</p>
</div>
</div>
</footer>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire