Unable to customize the appearance of the error page that pops up when JavaScript is not enabled due to restrictions on media-specific

I'm currently working on enhancing my website by adding a custom error page specifically for when javascript is disabled. I've already implemented a component within _document.js

<body>
    <noscript>
        <ErrorPage />
    </noscript>
</body>

Here is how the Error Page component is defined:

function ErrorPage() {

    const requiredMsg = 'Javascript Required'
    const errorText = 'We’re sorry, but the page does not work without JavaScript enabled. Please enable JavaScript on your browser.'

    return (
        <div style={{ width: '100%', textAlign: 'center' }} >
            <img style={{ width: '100%' }} src={ 'img.svg' } />
            <Typography component='h1' style={{ fontFamily: 'lato, sans-serif', color: '#1074C3' }}>{requiredMsg}</Typography>
        </div>
    )
}

export default ErrorPage

The current design looks good, but I want to enhance it with some media-specific styling and elements. Specifically, I want the page to take up the entire space in mobile view, while in desktop view, it should only occupy the middle 200px height with a faded background for rest of the area. Is it possible to achieve this? If so, how can it be done?

javascriptnext.jsnoscript

Answer №1

By embedding the styles within _document, I successfully implemented the desired design.

<Html>
                <noscript>
                    <style>{`
                        div.errorPage {
                            background-color: rgba(0,0,0,0.3);
                        }
                       
                        /* Customized for mobile view */
                        @media (max-width:600px) {
                            div.errorPage {
                                background-color: none;
                                width: 100%;
                                text-align: center;
                                height: auto;
                            }
                        }
                    `}</style>
                </noscript>

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

Having trouble with a JavaScript function as a novice coder

Hello, I'm still getting the hang of JavaScript - just a few days into learning it. I can't figure out why this function I'm calling isn't functioning as expected. Here's the content of my HTML page: <!doctype html> <htm ...

javascripthtml

Is there a way to troubleshoot and improve my Discord bot's kick functionality?

I'm having an issue with my code. When I type in the command "exp kick @user being toxic", it doesn't do anything. It seems to be ignoring my command. Here is the code snippet that I'm using: client.on("message", message => { var comm ...

javascriptdiscorddiscord.js

Avoiding Event Listener Activation for Numerous Dropdown Menus

I am currently working on a project that involves fetching data from a back-end Flask server by triggering an AJAX request when interacting with multi-checkbox drop-down menus. These drop-down menus, named "Select Date" and "Select Channel", are used to se ...

javascripthtmlajaxflaskevent-listener

Troubleshooting Next.js 13 Fetch Failed Error: Solutions to resolve this issue

During my exploration of the Next 13 beta version, I encountered a peculiar issue. My goal was to retrieve data from the server-side and display it on the page. However, the "fetch" operation failed on the server side. Below is the code snippet for the Nex ...

reactjsnext.jsfetch-apireact-domnext.js13

Integrating Excel into a webpage - is it possible?

Currently facing an issue on my website. I'm trying to open a 'file://' URL directly with the <a href=""> element in a browser, but it's prohibited. I'm searching for a plugin or similar solution that can enable me to execut ...

javascriptphpjqueryajaxexcel

Is the top bar feature malfunctioning in version 4.3.2 of Foundation?

During my previous project, I utilized the open-source Foundation 4 framework and successfully implemented a top bar navigation. Now, as I embark on a new project with Foundation, I have downloaded the Foundation 4.3.2 version from . Despite referencing th ...

javascripthtmlcsszurb-foundation

Insert a fresh item into the current JSON structure

I am facing an issue with a dropdown in my code. Here is how it looks: <input id="tripFrom" type="text" angular-select2="{type:'typeahead',placeholder:'- Select -'}" select-typeahead-params="{removeTripId:currentTrip.custome ...

javascriptjqueryangularjsjson

Exploring a custom hook with Jest testing

I have developed a custom hook that can display a notification message and automatically remove it after 2 seconds. I am looking to write a test for this functionality, but as someone new to writing tests, I'm unsure of the best approach. Can anyone p ...

reactjsnext.jsreact-hooksreact-reduxjestjs

Capturing and saving detailed hand-drawn artwork in high resolution

Is there a cutting-edge solution available for capturing hand-drawn sketches (from a tablet, touch screen, or iPad-like device) on a website using JavaScript and saving it on the server side? Essentially, I am looking for a mouse drawing canvas with a hig ...

javascriptjqueryhtmltablet-pc

Navigate directly to a designated element in a React component without the need to scroll when clicking a link

When viewing a user's profile in React, clicking on an image currently scrolls to that specific image within the entire images page. However, I am looking to modify this behavior so that it navigates directly to the image element without any scrolling ...

javascriptreactjsnext.jsuser-profile

Uploading files on a web page using AJAX technology

I'm attempting to perform a file upload on an ajax response page. The main.php file contains basic ajax code as shown below: <html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if ...

phpjavascriptajaxxmlhttprequest

What is the most effective way to alter the elements in a JavaScript array based on the total count of another element's value?

I have a task where I need to manipulate an array by adding or removing elements based on the total count of another value. let data = [ { "details": [ { "Name": "DataSet1", "Severity": "4& ...

javascriptarraysjsonjavascript-objects

Click-o-Meter: Tracking Button Presses

I’m looking to develop a button click counter that increases every time it is downloaded. I want to implement this functionality without using a database. Here's the code snippet: <?php $counterFile = 'path/to/counter.txt' ; ...

javascriptphpjqueryajax

Find the matching objects in two arrays by comparing their unique ids

There are two arrays containing objects. One array includes objects with an id property that holds a list of ids, while the other array contains objects with a unique id property. The goal is to filter the ids in the second array based on the ids in the fi ...

javascriptarrayslodash

When using npm install with a forked library, the installation may not be fully completed

Currently, I am working on a private Node.js project developed using Nest.js. For this project, I am utilizing the node-coap library, which I have forked into our company's GitHub profile. However, when I try to install it into the project using npm i ...

javascriptnode.jsnpmnode-modules

Aggregate and consolidate data based on multiple criteria while ensuring data integrity and maintaining type compliance

In search of a solution, I aim to organize an array of objects by a specified number of keys and calculate the sum of values of another set of keys. For instance, consider the following array: const arr = [ { type: "triangle", color: "green", available ...

javascriptnode.jsarraystypescriptgrouping

Implementing a timed delay before assigning a class in the state

I am trying to implement a delay before applying for a new class. This is my current situation const [isDone, setIsDone] = useState<boolean>(false); Within a method, I have the following code snippet const myMethod = () => { .... .... se ...

javascriptreactjsreact-reduxmaterial-uireact-hooks

React Native formInput Component with Underline Decoration

Utilizing the FormInput element in React Native Elements, I have observed a line underneath each FormInput component. Interestingly, one line appears fainter than the other. https://i.sstatic.net/ZD8CI.png This is how the form looks: <View style={sty ...

javascriptcssreactjsreact-native

Setting up JW Player with a YouTube Embed URL

Embed link Is it possible to embed a YouTube link in my JW Player without disrupting the design? I have a specific design for the JW Player frame that I need to retain while incorporating the YouTube link. I have searched extensively but haven't foun ...

javascripthtmlyoutubejwplayer

Issue encountered while generating REST API through Postman resulting in a 500 error

I am in the process of creating a Node.js API for a web application. The GET request is functioning properly, however, when attempting to execute a POST request, I encounter an error messageError Below is the code snippet: //User Schema const mongoose ...

javascriptnode.jspostman