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

Question

`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.

html css flexbox alignment centering

Answer 1

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.

Answer 2

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.

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

Answer №1

Similar questions

What is the best way to organize and position numerous images and text elements within a flex container?

Reposition the element at the bottom of its parent element

Issue with MUI Grid item not functioning properly when using overflowY: "auto"

What is the best way to align the navbar items at the center in Bootstrap when mx-auto is not working?

The Enchanted URL Folder Name

Can you guide me on implementing an onclick event using HTML, CSS, and JavaScript?

Creating a grid cell that spans the entire grid width

Using WebDriver Selenium to choose an element within a table following another element

The system encountered an issue with the CSS code, indicating "Invalid CSS after "...inear-gradient(": expected selector, was "{"

Unable to execute a JavaScript function when triggered from an HTML form

Transparent CSS Table Styling

Guide to modifying the behavior of a dynamic dropdown menu

Utilizing jQuery to Calculate Tab Scores

Create a div element within the parent window of the iFrame

Is the "add" feature malfunctioning?

Updating content with jQuery based on radio button selection

Passing references using a personalized component

Display the div if the input field is left blank

Automatically numbering text boxes upon pressing the enter key

CSS styling for the dropdown list in the content/option section