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


Tags: javascript,html,css

Problem :

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.



Solution :

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>

    CSS Howto..

    How to modify CSS or JS file from “materialize:materialize” package in Meteor

    how to stretch an image in background css property

    How to center modal window in css+html?

    how to make background-image included via a “class” responsive

    jQuery UI Tooltip with Arrow, why/how does this code work?

    How to mark search phrase in syntax highlighted markdown code?

    How to clip canvas with CSS clip-path?

    How to set top div height to the remaining height css

    How to move an entire group of objects with Javascript

    How to use 100% CSS background-image with scrolling content?

    How to equally align two vertical columns created using a loop, an array, and appending childs in JavaScript (or CSS)?

    How to add a custom CSS file in ExtJs 5?

    How to add CSS to a specific div class - WordPress

    How to make table td take the width of its content

    Dompdf: how to get background image to show on first page only

    How to put css class in to html:select element in jsp

    How do I control the wrapping of these
  • items?
  • How does one target IE7 and IE8 with valid CSS?

    How to style this triangle on a circular image?

    How to make content next to a fixed-position menu not overlap in smaller resolutions

    How to Draw Kundli Design (diamonds and triangles in square) using HTML and CSS?

    Grunt: how to concat a .CSS file onto my compiled .SCSS files?

    How can i make it through using bootstrap grid?

    How to use a custom image for cursor/thumb in html input type range

    how to rotate text with css? transform is not supported by current schema?

    How can I simplify this JavaScript code

    How can I make a different CSS for the first child
    ?

    How to make a block element adjust to the size of what is inside it?

    How to visually position image before heading element

    How to remove the double border bottom line below the breadcrumb