The w-screen and h-screen classes in Tailwind CSS are causing issues with the responsiveness of the

I've been working on creating a 404 page with Nextjs and typescript. I've encountered an issue with the responsiveness in the design, as shown in the screenshots below: https://i.sstatic.net/4xD9E.png https://i.sstatic.net/3yc7x.png

The scrollbar is appearing on both the right and bottom sides, causing a break in the responsiveness of the page.

To highlight this issue, I added a background color to the page.

Here's a snippet of my code...

import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";

interface Props {}

const ErrorPage: React.FC<Props> = ({}) => {
  const router = useRouter();
  return (
    <>
      <div className="bg-gray-900 h-screen w-screen flex justify-center items-center absolute z-0">
        <svg
          className="p-6 lg:p-48 fill-current text-gray-300"
          viewBox="0 0 445 202"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          stroke="currentColor"
          // viewBox="0 0 24 24"
        >
          <path
            d="M137.587 154.953h-22.102V197h-37.6v-42.047H.53v-33.557L72.36 2.803h43.125V124.9h22.102v30.053zM77.886 124.9V40.537L28.966 124.9h48.92zm116.707-23.718c0 22.46 1.842 39.643 5.525 51.547 3.684 11.905 11.23 17.857 22.64 17.857 11.411 0 18.89-5.952 22.44-17.857 3.548-11.904 5.323-29.086 5.323-51.547 0-23.54-1.775-40.97-5.324-52.29s-11.028-16.98-22.438-16.98c-11.41 0-18.957 5.66-22.64 16.98-3.684 11.32-5.526 28.75-5.526 52.29zM222.759.242c24.887 0 42.339 8.76 52.356 26.28 10.018 17.52 15.027 42.406 15.027 74.66s-5.01 57.095-15.027 74.525c-10.017 17.43-27.47 26.145-52.356...

Could the issue be related to using h-screen and w-screen properties or is it something wrong with flex? Without them, the desired layout (one div above the other) doesn't work as expected. I might have been staring at this code for too long and lost track. Any help on what am I doing wrong here would be greatly appreciated. Thank you.

cssflexboxnext.jstailwind-css

Answer №1

"width: 100vw" is causing layout issues. A horizontal scrollbar is appearing on the page.

The problem arises from using the w-screen property which specifies "width: 100vw" (indicating that the element should take up the entire horizontal space of the device screen).

Due to the presence of a vertical scrollbar on the page body (since the body may be taller than the screen height set to 100vh), the actual horizontal space available for content becomes less than 100vw as the scrollbar uses some of this space too.

This issue is not specific to TailwindCSS but rather a CSS bug in general.

The width of the vertical scrollbar typically ranges around ~12px, although it can vary based on different operating systems and screen sizes.

A potential improvement would involve CSS calculating the available screen width for the 100vw property while considering the scrollbar width, such as 100vw = real screen width - (vertical scrollbar's width, if present).

"(height: 100vh // max-height: 100vh)" is disrupting the page layout with a visible vertical scrollbar

Similar to the previous case, the issue results from employing the w-screen property for "width: 100vw" (which aims for full horizontal coverage).

With a vertical scrollbar on the page due to potential elongated content (exceeding the defined screen width of 100vw), you end up having lesser vertical space than 100vh as the vertical scrollbar claims part of this space.

The typical width of a horizontal scrollbar hovers around ~12px, subject to variations across OS platforms and display sizes.

An approach could entail adjusting the calculation for the 100vh value in CSS like so: 100vh = real screen height - (horizontal scrollbar's height, if applicable).

To address this now:

It would be advisable to use the properties width: 100% and height: 100% instead of width: 100vw and height: 100vh

Relying on vh and vw values comes with risks. The parent container semantically ought to encompass the child's dimensions.

Resorting to such fixes is akin to concealing overflow issues with "overflow-x: hidden".

Hence, your code structure should adhere to:

(...)

When working with TailwindCSS, opt for h-full and w-full over h-screen and w-screen.

Revisiting your configuration, possibly the following line was responsible for the malfunction:

<div className="h-screen w-screen flex justify-center items-center relative z-10">

Especially since you already applied the same attributes to the parent element:

<div className="bg-gray-900 h-screen w-screen flex justify-center items-center absolute z-0">

Your current setup lacks semantic correctness and resorts to workaround tactics.

I'm unable to access the tailwind.config.js file you mentioned, leading to missing custom colors in the demo due to absent TailwindCSS class names' values.

In essence, the provided code adjustments focus on replacing all -screen references with -full while eliminating excess padding at the bottom of the svg to prevent exceeding the 100vh limit on certain screens. This ensures better vertical alignment for the svg content.

Answer №2

It is recommended to include a parent relative div element

<div class="h-screen w-screen relative">

    <!-- 404 Error Page -->
    <div class="bg-gray-900 flex justify-center items-center absolute inset-0 z-0"> // the use of inset-0 is crucial
        <svg></svg>
    </div>
    
    <!-- Main Content Area -->
    <div class="flex justify-center items-center absolute inset-0 z-10">
    </div>

</div>

Answer №3

I recreated the layout you provided.

It might be a good idea to switch from using h-screen to min-h-screen.

You can see an example that incorporates your code by following this link.

https://play.tailwindcss.com/eD7VEDN5AR

Answer №4

Encountered comparable challenges in this situation - particularly when utilizing pre-designed tailwind templates that I hadn't personally configured from the beginning. The solution I found was to swap out every instance of h-screen and w-screen with h-full and w-full correspondingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React Component Div Containing a Hydration Error

Can someone help me resolve the Hydration error related to a nested div issue? I am working on a component that has two main functions - fetching data and mapping it. However, I keep encountering a hydration error and I'm not sure why it's happe ...

javascriptreactjsnext.jshydration

I find it curious that I need to include the bootstrap link in the body of the HTML file rather than in the head, unlike the bootstrap

Check out the Bootstrap documentation here which states that we should add the link at the end of the body just before its closing tag. As a newcomer, I've noticed linking being done in the head section for non-bootstrap codes, leading me to feel a bi ...

htmlcsstwitter-bootstrapbootstrap-5

Are there any instances where CSS is overlooking certain HTML elements?

In the following HTML code snippet, the presence of the element with class ChildBar is optional: <div class="Parent"> <div class="ChildFoo"></div> <div class="ChildBar"></div> <!-- May ...

javascripthtmlcss

Ways to trigger effects on one html element from another using css

I am looking to create a connection between two sets of elements, where one set consists of text links in a navigation bar and the other set contains images with references to the same links. These images have animation effects triggered by hovering over t ...

htmlcss

Having trouble with the authorization aspect of Next Auth. The error message reads: "NextAuth.js does not support the action api with HTTP GET method

Recently, I've been encountering a puzzling error with my Next.js app authentication. It seems that I am unable to authenticate with the provided credentials. After reviewing the documentation, everything appears to be correct on my end. Additionall ...

javascriptnode.jsreactjsnext.jsnext-auth

The inference of optional generic types is not occurring

I need help addressing a type error in my TypeScript wrapper for handling NextJS API requests. Specifically, I am facing an issue when trying to pass a single type for one of the generic types in the function. To illustrate this error, I have created a si ...

typescriptnext.jstypescript-generics

How can text be effectively shortened for small screen sizes?

Let's consider a scenario: Imagine on my website footer, at 1024px resolution screen, I have a link that says "Terms & Conditions" among other links. Now, using media queries, if the screen width is reduced to max-width: 320px, I would prefer to s ...

jqueryhtmlcssresponsive-design

Running Next.JS dev mode with experimental HTTPS enabled may encounter issues when using an external hard drive

All of my project files are saved on an external hard drive connected to a Mac Studio M1. I have not encountered any issues running these projects until recently when I discovered that the flag --experimental-https does not generate a certificate when I ru ...

next.jshttpsnext.js13

What is the proper way to add my image to CSS?

I'm encountering an issue while trying to insert my picture - I keep receiving a 404 error even though I believe my path is correct. Here are my files: main-menu phone.png _menu.scss Within my _menu.scss file, the following code is p ...

cssimagesasspath

Guide on displaying an X mark on a checkbox in AngularJS when the ng-disabled value is set to true

Is there a way to display an X mark in red on checkboxes when the ng-disabled condition is evaluated as true? I am a beginner in Angular.js and would appreciate any assistance. Here is what I have attempted so far: if (module.Name === 'val1' || ...

javascriptcssangularjscheckbox

Triple-decker Angular Table CSS Layout

Please take a look at the code below, it is currently working properly. <div ng-repeat="download in productDownloads" class="container"> <div class="row"> <div class="cell"> <strong>{{download.productName}}</strong> </di ...

angularjstwitter-bootstrapcssuser-interfacecss-tables

Adding an input field and icon at the center using ::after

Having trouble centering an input field with an icon after it in a div. I can center the input text easily using text-align:center, but struggling to center the icon added using ::before. The search text is centered, but not the icon https://i.sstatic.ne ...

htmlcss

Prevent jQuery UI default styling from being applied

I'm curious about how to prevent jQuery UI from adding any classes when initializing $.tabs(). This is the structure of my HTML: <link href="smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" /> ... <link href="estilos ...

jqueryhtmlcssjquery-uijquery-ui-tabs

An easy guide on inserting a new row or footer in the rc-table component using React JS

I am looking to insert a new row at the end of an rc-table in order to display the total value of a particular column. const columns = [ { title: "Name", className: "cursor-pointer", dataIndex: "name", key: ...

reactjsnext.js

Creating static pages with dynamic nested routes is a powerful feature that can enhance the structure

I've been working on a website and I've encountered a problem. Essentially, I need to display movies by genre from a database. When a user clicks on a genre, it should take them to another list of movies in that genre. Then, when they click on a ...

javascriptnext.jsstatic-site-generation

HTML text-indent is a way to add extra space to

I cannot understand why my text is not indenting properly. At the very bottom left corner, the "Educational Specifications" text is enclosed within a p element as follows: <p style="text-indent: 3em">Educational Specifications</p> Why doesn& ...

htmlcss

Subnav sticks when scrolling down but becomes unresponsive on resizing

My webpage has a main header that sticks to the top of the window and a subnav fixed at the bottom. The hero image adjusts its height based on the window minus the header and subnav heights. When scrolling past the subnav, it sticks just below the main nav ...

jquerycss

How can I display two different styles on a single page in ASP.NET MVC without any conflicts between CSS classes?

Currently, I am developing a web-based application that is capable of generating documents containing specific data. A new functionality has been introduced in the document generator, allowing users to input an Atlassian Confluence link into a designated t ...

c#htmlcssasp.net

showcase every value upon submission in the form with options to edit and delete

Is it possible to display all values submitted in a form with edit and delete buttons? Currently, only one value is being displayed at a time. Whenever a new value is displayed, it replaces the old one. How can this be fixed? You can fin ...

javascriptjquerycsshtml

"Comparison: Utilizing HTML5 Video Player with IE8 Embed Fallback versus Implementing Fixed

This dilemma has me at my wit's end. In an HTML5 Video element, I've included an mp4, ogg, and an embedded mp4 fallback. However, on the embed fallback in IE8, all my attempts to position the fixed element (#fixed) above it with z-indexing have f ...

csshtmlvideoembedcss-position