`Problem with the layout of the form on the website`

Experiencing some challenges with the container design for a job sheet project. As a beginner, I have been learning on the fly and following online tutorials to create functional forms. However, this particular form is not rendering correctly when viewed on mobile devices like iPhone and Samsung.

The screen seems to be cutting off important sections at the top, making it difficult to access crucial information. Examples include the inability to view the top of the page on a Samsung Galaxy device or scroll up completely on an iPhone XR.

I attempted to adjust the positioning of the container by setting a 'top' style to 80%, which partially solved the issue but still left the bottom portion obscured. Experimenting with the 'bottom' property only worsened the problem. Tweaking various styles within the container did not yield any positive results either.

Changing the body styling, switching between percentage and pixel width/height measurements, adjusting overflow settings, and trying different combinations of dimensions did not resolve the truncation problem. The struggle continues to ensure the form displays correctly on all devices.

htmlcssflexboxalignmentcentering

Answer №1

Your code currently uses a mix of centering methods, including flexbox and absolute positioning on body and .container. The absolute positioning with specific left/top/transform values in .container can lead to content overflowing the window at smaller screen sizes and is unnecessary given the flex settings applied to body. Remove the following lines from .container:

transform: translate(-50%,-50%);
position: absolute;
left: 50%;
top: 80%;

Here's the updated snippet without those unnecessary settings:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
  padding: 0;
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: #ececec;
}
.container{
    background-color: #ffffff;
    min-width: 80%;
    overflow: auto;
    max-height:min-content;
    height:auto;
    padding: 3%;
    border-radius: 1%;
    box-shadow: 20px 30px 25px rgba(0,0,0,0.15);
}

.container .form {
    margin-top: 30px;
}

.form .input-box {
    width: 100%;
    margin-top: 2%;
}

.input-box label {
    color: #333;
}

.form :where(.input-box input, .select-box,) {
    position: relative;
    height: 50px;
    width: 100%;
    outline:none;
    font-size: 1rem;
    color: #707070;
    margin-top: px;
    border: 2px solid #ddd;
    border-radius: 1px;
    padding: 0 15px;
}

h1{
    font-size: 30px;
    text-align: center;
    color: #1c093c;
}

p{
    position: relative;
    margin: auto;
    width: 100%;
    text-align: center;
    color: #606060;
    font-size: 14px;
    font-weight: 400;
}
form{
    width: 100%;
    position: relative;
    margin: 30px auto 0 auto;
}
.row{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    grid-gap: 20px 30px;
    margin-bottom: 20px;
}
label{
    color: #1c093c;
    font-size: 14px;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.flex-row {
    display: flex;
}

.wrapper {
    border: 1px solid #4b00ff;
    border-right: 0;
}

canvas#signature-pad {
    background: #fff;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

button#clear {
    height: 100%;
    background: #4b00ff;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

button#clear span {
    transform: rotate(90deg);
    display: block;
}


textarea,
input{
    width: 100%;
    font-weight: 400;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1.2px solid #c4cae0;
    margin-top: 5px;
}


textarea{
    resize: none;
}
textarea:focus,
input:focus{
    outline: none;
    border-color: #6f6df4;
}

button{
    border: none;
    padding: 10px 20px;
    background: linear-gradient(
        130deg,
        #6f6df4,
        #4c46f5
    );
    color: #ffffff;
    border-radius: 3px;
}

@media screen and (max-width: 500px) {
    .form .column {
      flex-wrap: wrap;
    }
  
    /*trying to style the button to be wrapped */
    .upload .up {
      flex-wrap: wrap;
    }
  }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Form</title>
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
    <!--Signaure pad link-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/4.1.7/signature_pad.umd.min.js"></script>
</head>

<body>
    
    <section class="container">
        <h1>Site Report Sheet</h1>
        <form action="#" class="form">

            <div class="row">
                <div class="column">
                    <label for="issue">Client details</label>
                    <textarea id="issue" placeholder="" rows="3"></textarea>
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="issue">Site Name & Address</label>
                    <textarea id="issue" placeholder="" rows="3"></textarea>
                </div>
            </div>


            <div class="row">
                <div class="column">
                    <label for="number">WIS Number</label>
                    <input type="text" id="number" placeholder="">
                </div>

                <div class="input-box">
                    <label>Date</label>
                    <input type="date" required/>
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="issue"></label>
                    <textarea id="issue" placeholder="Type here" rows="3"></textarea>
                </div>
            </div>

            <h4>THE ABOVE IS CERTIFIED CORRECT AND SYSTEM HAS BEEN LEFT IN <u>WORKING ORDER</u></h4> <br>

            <div class="row">
                <div class="column">
                    <label for="name">Name</label>
                    <input type="text" id="name" placeholder="">
                </div>

                <!--Signature pad-->

                <div class="flex-row">
                    <div class="wrapper">
                        <canvas id="signature-pad" width="400" height="200"></canvas>
                    </div>
                    <div class="clear-btn">
                        <button id="clear"><span> Clear </span></button>
                    </div>
                </div>

                <div class="row">
                    <div class="column">
                        <label for="number">On behalf of</label>
                        <input type="text" id="number" placeholder="">
                    </div>
                </div>

                <div class="column">
                    <label for="ename">Engineers Name</label>
                    <input type="text" id="ename" placeholder="">
                </div>


                <div class="column">
                    <label for="ename">Engineers Name</label>
                    <input type="text" id="ename" placeholder="">
                </div>



            </div>





        </form>
    </section>
    </div>
</body>

</html>

Lastly, applying a 20% margin to all elements via the * selector is not recommended. I have removed it from the provided code above.

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

What steps can I take to get rid of the 'Optimize CSS Delivery' notification on my website?

Utilizing Google's PageSpeed Insights to analyze my website's speed, I have identified an issue: Your page currently has 11 blocking CSS resources, resulting in slower rendering time. About 5% of the content above-the-fold could be displayed with ...

css

Adaptable design tailored for smartphones

When it comes to developing mobile websites for various platforms such as iPhone 3 and 4, Android, Blackberry Torch, etc., I usually find myself needing to slice images based on the specific platform. The challenge arises from constantly having to slice im ...

javascriptwebkitcss

JSOUP is cleverly filtering out specific tags while navigating through the HTML tree

While attempting to navigate the HTML tree of a Wikipedia page, I noticed that certain blocks of HTML elements in the code are being omitted. Is there a way to prevent these omissions? CODE Document doc = Jsoup.connect(url).timeout(10000).userAgent(USER_ ...

javahtmlweb-scrapingjsoup

How can I send parameters to an HTML file using Node.js?

In my current code res.sendfile('./home.html',{user:req.user}), I need to figure out a way to access the user parameter directly in the HTML file without relying on a template engine. Can anyone suggest how this can be achieved? ...

javascripthtmlnode.jsexpress

Reverse the color of H1 text within a vertical div

Is it feasible to reverse the coloring of a segment within an h1 element using a div, horizontally? Refer to the illustration shown in the image below. https://i.sstatic.net/QAKwD.jpg ...

javascripthtmlcss

Is there a way to ensure consistent border thickness in a material-ui table layout?

In my current setup of a material UI table, I have applied a 1-pixel thickness to all elements. This leads to a slightly thicker appearance at the points where two cells meet compared to the outer edges. How can I achieve a consistent border width of 1px ...

cssmaterial-uifrontend

Error: Property '$filter' is not defined and cannot be read

Whenever a user clicks on a link, I display the json object on the UI. However, an exception is being thrown with the following message: TypeError: Cannot read property '$filter' of undefined Check out the demo here: http://plnkr.co/edit/5NOBQ3 ...

htmlangularjsangularjs-filter

REST, hypertext, and clients other than web browsers

I'm struggling to understand how a REST API can be both hypertext driven, as explained in this article, and still be machine readable. Let's say I create an API where one endpoint lists the contents of a collection. GET /api/companies/ When the ...

htmljsonhttprest

Text in the middle of a button

I've been attempting to recreate the design of this "subscribe to the newsletter button". I'm struggling with achieving the white "inside border or outline" effect. Here is an example of the button ...

htmlcss

Try incorporating a variety of colors to enhance the appearance of your paper-menu in Polymer 1

I'm currently working on creating a customized menu using Polymer 1.0. This is how my menu structure looks like: <paper-menu> <template is="dom-repeat" items="{{menu}}" as="item"> <paper-item> <div>{{item.title}}</div& ...

csscolorspolymer

Inspect the data attribute and modify the class

I am looking to determine if a data attribute has a specific value and then update the class associated with it. For example, in my HTML code: <li class="country active" data-country-code="ca"><div class="flag ca"& ...

javascriptjqueryhtml

Tips for validating email addresses and enforcing minimum length requirements

In order to validate email input for the correct format and ensure minimum length validations for first name and password, I am looking to utilize only bootstrap. While I have successfully implemented required field validations for the inputs, I am unsure ...

javascripthtmltypescriptbootstrap-4

setTimeout executes twice, even if it is cleared beforehand

I have a collection of images stored in the img/ directory named 1-13.jpg. My goal is to iterate through these images using a loop. The #next_container element is designed to pause the loop if it has already started, change the src attribute to the next im ...

javascripthtmlsettimeout

I am having difficulty creating grid-template-columns in Vue

When I placed my code in the style scoped section... This is the desired output that I'm aiming for: .user-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 1rem; } .user-car ...

cssvue.jsgridnuxt.js

Interact with elements using Selenium with dynamic target IDs and AJAX

Currently, I am utilizing selenium for automating various IT administrative tasks. One specific task involves swapping out external drives on a NAS system accessed through an internal webpage. The web interface of the NAS appears to utilize AJAX, which dyn ...

htmlajaxselenium

Aligning an image vertically within a division

I am currently working on aligning images vertically within an image rotator (SlideDeck). At the moment, all the images are aligned at the top but I need them to be centered. The heights of the images vary. I have tried several methods, including absolute ...

csshtmlvertical-alignment

Utilize a custom endpoint for Microsoft Graph Toolkit: "Implement a domain-specific endpoint"

I'm currently following the instructions provided at this Microsoft Graph Toolkit tutorial. My code is quite straightforward, including the script reference, the mgt-msal2-provider element with my client-id specified, and a basic login component < ...

htmlazuremicrosoft-graph-api

What is the best way to utilize a mask in an inline SVG that is compatible with Chrome browser?

I am looking to visually crop my element using an SVG shape that is defined within the same HTML file (inline SVG). Using clip-path works perfectly: div { width: 200px; height: 200px; background-color: red; clip-path: url("#c"); } <div> ...

htmlcsssvg

Navigate Behind Slider on Scrolling

My menu bar is going behind the cycle slider when I scroll down. It works fine on other sections but only causes trouble on the slider. I have tried using z-index 1, but it's not working. Can anyone provide a solution? I'm not sure what I'm ...

htmlcss

Struggling with my Transform Origin in CSS for SVG

I have two classes (firstCircle & spin) on the first circle on the left, and I'm attempting to make it rotate in place. After removing them from the css so you can see the circle, I am having trouble with transform-origin. My code seems wrong as i ...

csssvg