I made my header (w-screen h-screen) and there is basically no problem at all. Now I finished my header so I want to move on to other content. First step is adding a section, so I add:
<section class="w-screen h-screen></section> and the first thing that appears on my website is a horizontal scrollbar? Does anyone know why this happens?
My full code:
<!-- Tailwind + Typekit -->
<link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="nofollow noreferrer noopener" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/eua1ond.css" rel="nofollow noreferrer noopener">
<!-- Body -->
<header class="w-screen h-screen flex flex-col bg-no-repeat bg-cover bg-bottom bg-fixed bg-header_mob sm:bg-header_lptpsm laptop-big:bg-header">
<nav class="fixed left-0 right-0 flex justify-between flex-wrap px-12 py-2 laptop-big:px-20">
<a href="index.html" rel="nofollow noreferrer noopener">
<img id="logo" class="object-cover h-12 w-auto laptop-big:h-16" src="images/GNRdigitalTrees.svg" alt="Portfolio logo - GNR digital">
</a>
<div class="flex items-center md:hidden">
<button id="menuButton" class="flex items-center px-3 py-2 border rounded text-offwhite border-offwhite hover:text-opacity-30 hover:border-opacity-30">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
</svg>
</button>
</div>
<div id="navLinks" class="w-full hidden md:flex md:flex-row md:w-auto">
<ul class="mob mt-4 items-center md:mt-0 md:flex-grow md:flex md:justify-end font-nav font-bold uppercase text-sm tracking-extrawide text-offwhite 2xl:drop-shadow-xl">
<li class="mr-4 md:ml-0"><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="md:inline-block md:mt-0 text-teal-200 hover:text-white">Skills</a></li>
<span class="rounded-full w-1.5 h-1.5 bg-offwhite md:inline-block mr-4 mb-0.5"></span>
<li class="mr-4 md:ml-0"><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="md:inline-block md:mt-0 text-teal-200 hover:text-white">Work</a></li>
<span class="rounded-full w-1.5 h-1.5 bg-offwhite md:inline-block mr-4 mb-0.5"></span>
<li class="mr-4 md:ml-0"><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="md:inline-block md:mt-0 text-teal-200 hover:text-white">Cv</a></li>
<span class="rounded-full w-1.5 h-1.5 bg-offwhite md:inline-block mr-4 mb-0.5"></span>
<li class="md:ml-0"><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="md:inline-block md:mt-0 text-teal-200 hover:text-white">Contact</a></li>
</ul>
</div>
</nav>
<div class="flex-grow grid grid-rows-2 sm:grid-cols-2 sm:justify-items-stretch border border-red-300">
<div class="flex flex-col row-start-2 row-end-3 px-12 mt-24 sm:mt-0 sm:col-start-1 sm:col-end-2 sm:pl-8 sm:pr-12 sm:mb-32 sm:justify-self-center sm:place-content-end laptop-big:pl-20 laptop-big:pr-28">
<h1 class="font-header font-medium text-4xl text-desertstorm laptop-big:text-5xl">Welcome</h1>
<p class="font-body font-extralight text-lg text-desertstorm mt-1 ml-1 laptop-big:text-xl">I'm Gunnar Van Remoortere, I design and code websites and brands. Are you looking for someone to help you with a digital related job? </p>
<div class="mt-6">
<a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="px-6 py-2 rounded-lg bg-white bg-opacity-10 border-2 border-white border-opacity-10 backdrop-blur-xl text-center text-desertstorm text-base font-medium tracking-widest cursor-pointer uppercase hover:bg-opacity-20">Contact me</a>
</div>
</div>
<div class="invisible flex flex-row md:visible md:items-center md:justify-self-end md:col-start-2 md:col-end-3 md:row-start-1 md:row-end-3 md:mr-4">
<h2 class="md:h-1/2 md:transform md:rotate-90 md:uppercase md:text-desertstorm md:text-5xl md:font-body md:font-thin md:tracking-extrawide md:mr-12 laptop-big:text-6xl laptop-big:mr-10">Portfolio</h2>
</div>
</div>
</header>Underneath the tag I added the section and the scrollbar appeared…
When I inspect my page once the section is added it looks like this:
before section:
section added:
I added some borders to clearly see what element reaches where, but I still don’t understand what the problem is here…
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
Solved my own question once I continued working on this… Apparently it was just the scrollbar that was occupying space and therefor messing with the w-screen.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0