concerning adaptable and unresponsive webpages

I recently created two different web pages to explore the contrasting features between responsive and non-responsive designs. I specified the width and margin values in the CSS files for both pages.

Remarkably, both web pages exhibit responsive behavior effortlessly on their own.

This is the CSS code snippet:

@CHARSET "ISO-8859-1";
body {
    background-color: #999999;

}
.signUp {
    background-color: #2F4F4F;
    margin: 40px auto;
    border-radius: 5px;
    max-width: 1000px;
    box-shadow: 0px 0px 200px 0px #2F4F4F;
}
.rowLab {
    font-size: 20px;
    padding: 0px 60px 0px 0px;
}
.in {
    width: 400px;
    position: relative;
    background-color: #2F4F4F;
    padding: 5px 10px 5px 5px;
    font-size: 25px;
}
.btn {
    background-color: gray;
    color: #2F4F4F;
    padding: 10px 40px 10px 40px;
}

However, I am now looking to prevent this automatic responsiveness. Is there a way to stop the pages from resizing when I decrease the screen size?

Here is an excerpt of my HTML page:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>SignUp</title>

        <link rel="stylesheet" href="webStyle.css">

        <script type="text/javascript">
            function contact() {
                var a=document.getElementById("phone").value;
                if(a.length!=10){
                    alert("Check Contact Number !!");
                }
            }

        </script>
    </head>
    <body>
        <div class="signUp">
            <form action="DBinsert" method="get" >
                <br><br>
                <h1 style="font-size: 50px; color: #ffffff" align="center">Register Yourself</h1>
                <br><br><br>


                <table align="center">
                    <tr>
                        <td class="rowLab">First Name</td>
                        <td><input class="in" type="text" name="fname" required autocomplete="on"></td>
                    </tr>
                    <tr>
                        <td class="rowLab">Last Name</td>
                        <td><input class="in" type="text" name="sname" required autocomplete="on"></td>
                    </tr>
                    <tr>
                        <td class="rowLab">Username</td>
                        <td><input class="in" type="text" name="uname" required autocomplete="on"></td>
                    </tr>
                    <tr>
                        <td class="rowLab">Password</td>
                        <td><input class="in" type="password" name="pwd" required autocomplete="off"></td>
                    </tr>
                    <tr>
                        <td class="rowLab">Email Id</td>
                        <td><input class="in" type="text" name="email" required autocomplete="on"></td>
                    </tr>
                    <tr>
                        <td class="rowLab">Phone NO.</td>
                        <td><input class="in" type="text" name="phone" id="phone" onblur="contact()" required autocomplete="on"></td>
                    </tr>
                    <tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
                    ... (more table rows) ...

                </table>

            </form>
        </div>
    </body>
</html>

Answer №1

To maintain a consistent page size regardless of window or screen size, the width must be set to a specific value rather than a percentage.

For example: width: 1000px;, width: 1000em;, or width: 1000rem;, instead of width: 100%; or width: 100vw;.

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

Utilize Laravel 7 to establish a connection between Order ID and User ID, allowing you to retrieve

I need to retrieve the user name of the user who created an offer based on the seller's ID. In my database, I have 2 tables: First table User User | | - id | - name And the second table is Orders: Orders | | - id | - seller (User id ...

Importing for the purpose of minimizing and combining CSS files is not functioning as expected in conjunction with the h5bp

After configuring my main.css to import two style sheets using the @import rule, I ran into an issue. The H5BP build script minified and concatenated the main.css, but the imported files were missing. I double-checked the build script's config to ens ...

What could be causing this JavaScript/CSS animation to only function on the initial instance and not the subsequent ones?

I've been attempting to apply this transition effect to multiple circles, but only the first one triggers it no matter where they are positioned on the page. javascript let circles = document.querySelectorAll('.circle') circles.forEach(cir ...

Tips for restricting additional input when maximum length is reached in an Angular app

In my Angular 6 application, I am working on implementing a directive that prevents users from typing additional characters in an input field. However, I want to allow certain non-data input keys such as tab, delete, and backspace. Currently, I have an if ...

Creating round corners for images with jQuery

To achieve rounded corners on multiple blocks using a single image above, I am opting for the use of images instead of plugins for maximum compatibility. This involves creating wrappers around the blocks to apply the corner images: <div class="wrapper- ...

Concealing Components using Angular's ng-change Feature

I need help displaying or hiding an element in a form using ng-change or any other method you suggest. Here is the HTML snippet I am working with: <div ng-app ng-controller="Controller"> <select ng-model="myDropDown" ng-change="changeState( ...

The color of the text changes from its default color when not in use

Hey there, let me break this down for you... I'm currently in the process of styling a contact form. I've managed to change the text color of my input focus to white. However, when I click away from the form, the inputted text color reverts ba ...

"When the screen resolution changes, the absolute positioning of images won't function as expected

I am trying to overlay one image on top of another background image, but I am facing an issue. When I change the screen resolution, the position of the image that should be placed over the background image also changes. Below is the code I am using: ...

Interactive Image with Markers - Continued

For those of you just starting out, I want to apologize if my question isn't crystal clear. My goal is to create an image that will respond both horizontally and vertically, with pins overlaying the image that adjust in size based on the picture itse ...

Switching website to mobile version when accessed on a handheld device

Although I'm sure this question has been asked before, I can't seem to find any information on it. I am interested in creating two versions of my website - one specifically for mobile displayed on a subdomain like m., and another version for desk ...

Design a clickable div element embedded within an interactive article using HTML5

Currently, I am facing an issue with placing clickable div elements inside an article tag in HTML5. The problem is that when I try to click the divs, it registers as a click on the article itself. Below is an example of my code: HTML: <article id=&apo ...

The expansion animation for the Nextjs/React accordion box did not work as expected when utilizing tailwindcss

I am currently working on creating an animation for a collapsible box (accordion). My goal is to have the child component initially hidden with display:none. When I hover over the parent component, the child should be revealed and the dimensions of the pa ...

Solution: Resolve clientY scrolling issue within an HTML document

I am facing an issue with the positioning of my context menu. When I right-click and scroll down, the menu does not maintain its regular position. Instead of appearing to the right of the mouse cursor when stationary, it moves below the cursor based on how ...

What methods can I use to obtain negative numbers through swipe detection?

In my code, I am using three variables. The first one is x which serves as the starting point, followed by myCount which counts the number of swipes a user performs, and finally, dist which calculates the distance from the initial point. I want to set myC ...

Converting date and time entries into a Date object for proper formatting

For the front-end, I am using HTML and for the back-end, JAVA. My goal is to convert information from two text inputs into a Date object in Java. The first input should contain the date in the format DD/MM/YYYY and the second input should have the time for ...

Selecting a pair of radio buttons to toggle the visibility of different div elements using JavaScript

I've been working on two radio button categories that control the visibility of different input fields. I'm making progress, but I'm still struggling to get it to work perfectly. Below are the images for reference: The combination of &apos ...

Position the div at the center of its parent container, disregarding any floating

I am attempting to generate a 'section' division with a header. The goal is for this header to have a centered title and the possibility of including a jquery UI button on its right side. The width of the 'section' division will be dete ...

Is there a way to eliminate the additional and varying pseudo-padding on text inputs in both Webkit and Gecko browsers?

The issue I'm facing is specific to input[type="text"] elements in Webkit. No matter what adjustments I make, it seems like there is an additional padding: 1px 0 0 1px (top and left only) applied to the element. A similar anomaly occurs in Gecko as w ...

Access an applet via a JSP webpage

I've created a basic Hello World Applet and saved the .class file on the server where the JSP site is located. I need help with what code to add to the JSP site so that when the site is opened in a browser, the applet runs and displays the message "H ...

Using Jquery to insert content into HTML using the .html() method is not possible

I am inserting Dynamic Code into a Div via Ajax and I also need to include some Javascript, but it's not displaying in the code. Below is the code snippet: $.ajax({ url: "ajax_add_logo_parts.php", data: 'act=getPartIm ...