CODEWITHSUNDEEP
javascripthtmlcss
Kali
Kali

Reputation: 93

How to make the page layout stay the same after minimized?

How do I make my page layout stay the same and not become all clumped up when minimized?

this is how the page is supposed to normally look

but when minimized the page layout becomes

all squished out and the layout is messed up

. I was wondering how I could fix this? I'm still new to HTML and CSS so I was having trouble with figuring this out.

Sorry if the coding is a bit messed up this is my first time doing html and css! Appreciate all of the help I can get. I'm also doing this with google apps script.

Upvotes: 0

Views: 11089

Answers (6)

gregnr
gregnr

Reputation: 1272

As mentioned by others, you can force everything to stay the same by giving the container a set width. For example, you could define a width to the body:

body {
    width: 1000px;
}

Most modern websites are created with Responsive Web Design in mind, meaning that elements on the page will shift around depending on the window size. This allows the same webpage to appear correctly on every device, including small mobile screens.

Bootstrap is one of the most common frameworks used to create responsive web pages. You might be interested in reading this tutorial: http://www.revillweb.com/tutorials/bootstrap-tutorial/.

Upvotes: 0

allicarn
allicarn

Reputation: 2919

The issue is you're mixing percentage and pixel units. Here, I've updated the label/inputs to be all in percentages. https://jsfiddle.net/9nguoepu/8/

However, note that they still "squish". If they should remain the same width no matter the users' viewport size, set a min-width on your body tag in CSS. The user will have a horizontal scrollbar in this case, if their viewport is too narrow (like on a mobile device, for example).

I also would recommend making the forms more semantic, as I did in the js fiddle - using <label> and keeping them next to/near the input they're labelling. To be completely accessible, you should add a for attribute with the id of the input. For example:

<label for="customer-phone-num">Phone Number</label>
<input type="text" id="customer-phone-num" />

Note that this is an id, so it has to be unique-per-page.

You should also be careful to separate styles from semantics. For example, the <b> tag doesn't mean anything if you're reading the source, but visually, it means it should be bold. Those kinds of stylistic specifications should be handled in the CSS. Read this Q&A for more details: https://softwareengineering.stackexchange.com/questions/255366/why-are-the-b-and-i-tags-deprecated

Upvotes: 0

Eric Guan
Eric Guan

Reputation: 15992

Setting minimum widths prevents elements from getting squished. https://jsfiddle.net/9nguoepu/9/

HTML

<div class="customer-info-container">
            <div class="label">

                <p><b>Customer Name</b>
                </p>
                <p><b>Due Date</b>
                </p>
                <p><b>Phone #</b>
                </p>
            </div>
            <div class="inputBox">

                <p>
                    <input type="text">
                </p>
                <p>
                    <input type="text">
                </p>
                <p>
                    <input type="text">
                </p>

            </div>
            <div class="label2">

                <p><b>Contact</b>
                </p>
                <p><b>E-mail</b>
                </p>
                <p><b>PO#</b>
                </p>
            </div>
            <div class="inputBox2">

                <p>
                    <input type="text">
                </p>
                <p>
                    <input type="text">
                </p>
                <p>
                    <input type="text">
                </p>

            </div>
        </div>

CSS

 .customer-info-container{
        width: 800px;
        min-width: 800px;
    }

.customer-info-container{
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .customer-info-container div  {
        display: inline-block;
    }
 .contentBackground {
    background-color:#D8D8D8;
    clear:left;
    min-width:800px;
    width: 60%;

    margin: auto;
    height: 200px
}

Upvotes: 0

nathanhleung
nathanhleung

Reputation: 516

Rather than using hardcoded px values (such as margin-left: 310px), set width: 100% on your body element and use percentage values. So, instead of margin-left: 310px for a margin-left of a quarter of the screen, you can use margin-left: 25%.

Upvotes: 1

jfoutch
jfoutch

Reputation: 1398

Something like this? https://jsfiddle.net/9nguoepu/7/ I just added some divs wrapping your labels and form inputs and a little css.

    <style type="text/css"> * {
    margin: 0
}
.container {
    margin-left: auto;
    margin-right: auto
}
.header {
    background-color: #8000FF;
    margin:auto;
    width: 50%;
    border:3px solid #41087B;
    padding: 10px;
}
.header img {
    float:left;
    padding: 5px;
}
.header h1 {
    color: white;
    line-height: 80px;
    text-align:center
}
.label {
   float: left;
    padding: 5px;
    color: red;
}
.label-container {
width: 50%;
    float:left;
}
.label p {
    padding: 2px
}
.inputBox {
    float:left;
}
.inputBox p {
    padding: 1px
}
.label2 {

    float:left;
    padding:5px;
    color: red
}
.label2 p {
    padding:2px
}
.inputBox2 {
    float:left;
}
.inputBox2 p {
    padding: 1px
}
.contentBackground {
    background-color:#D8D8D8;
    clear:left;
    width: 60%;
    margin: auto;
    height: 200px
         display: block;
}
.uploadFile p {
    text-align:center;
    padding: 20px;
    color:red
}
.content p {
    color:red;
    padding: 7px
}
.dropDown p {
    padding: 40px;
    margin-left: 8px;
    height:
}
.moreFiles {
    text-align:center
}
.textBox {
    text-align: center
}
.textBox p {
    text-align:center;
    padding: 5px
}
.button {
    text-align: center
}
</style>

Upvotes: 0

Brad Thiessen
Brad Thiessen

Reputation: 563

Add width: 1000px; to your container. Then the layout should stay consistent.

Upvotes: 0

Related Questions