How do I make everything on this page centered and fully responsive for all browsers?


Tags: html,css,internet-explorer,responsive-design

Problem :

Link to my website: http://foxweb.marist.edu/users/kf79g/contact.php

I am having trouble with my contact page. I want the entire thing to be centered and responsive no matter what the screen size (even if you resize your window to the tiniest possible width). NOTE: Leave the large/desktop screen alone that is how I want it to look unless you find a way to make the form width bigger and responsive. I attempted to make the entire page centered on medium and small screens. However, as the page shrinks, the center attribute measurements are off a bit. The reason for this was that some had to be different so that it looked good for older browsers. The social icons are giving me trouble too. Is there any way to make the entire thing centered for all devices and browsers? I tried my best with the measurements. Any help would be much appreciated.

Here are my problems that I wish to fix:

Firefox: On medium pages, the form is going out of bounds. On small pages, the form is shrinking when the page is small. On small pages, social icons are messed up. On medium and small pages, the form is not centered evenly.

IE 7: On medium pages and small pages, social icons are messed up. On small pages, the form is going out of bounds. Form is not shrinking on small screens. On medium and small pages, the form is not centered evenly.

IE 8: On small pages, the form is shrinking. On medium and small pages, the form is not centered evenly. Social icons are not as bad.

HTML:

<section>

            <div id='main_section'>
                <div id = "center">
                <div id='details_section'> 
                <br/>

                    <h2> Stay in touch </h2><br/>
                    <p>I love getting feedback regarding all my projects, works, and services. You can use the quick contact form to leave a message, comments and questions.</p><br/>
                    <p>Your name and e-mail address are never shared, I just use them when I need to get back to you.</p><br/>


                    <h2> Social networks </h2><br/>
                    <div id = "center_icons">
                        <a href="https://www.facebook.com/lenny.pfautsch" target="_blank"><img src="images/facebook.png" alt="facebook" style="margin:1px;"></a> 

                        <a href="https://plus.google.com/113122168458946246215/posts" target="_blank"><img src="images/google-plus.png" alt="google plus" style="margin:1px;"></a>

                        <a href="http://www.linkedin.com/pub/leonard-pfautsch/53/b34/1a2" target="_blank"><img src="images/linkedin.png" alt="linkedin" style="margin:1px;"></a>

                        <a href="https://github.com/LeonardPfautsch" target="_blank"><img src="images/github.png" alt="github" style="margin:1px;"></a>
                    </div>
                <br/>

                </div>
                </div>

                <div id = "center">
                <div id='contact_section'>
                    <form method='POST' action='contact.php'>
                    <span class='label'>Name:</span><br/>
                    <input type='text' class='textfield' name='name' size='50' maxlength='50'><br/>
                    <span class='label'>Email:</span><br/>
                    <input type='text' class='textfield' name='email' size='50' maxlength='50'><br/>
                    <span class='label'>Subject:</span><br/>
                    <input type='text' class='textfield' name='subject' size='50' maxlength='50'><br/>
                    <span class='label'>Message:</span><br/>
                    <textarea rows='5' cols='50' name='message' id='textarea' maxlength='500'></textarea><br/>
                    <input type='submit' value='Send' id='submit' name='action'> 
                    </form>
                </div>
                </div>


            </div>
        </section>

Main CSS:

#details_section {

    max-width:100%;
    float:left;
    margin-right:20px;


}


#contact_section {
    max-width:100%;
    margin-bottom:40px;
    margin-right: 0px;

    margin-top:20px;
    padding:20px; /*Make this smaller for 100% responsiveness*/
    border-radius:10px;
    background:#f1f1f1;
    box-shadow:0px 0px 15px #272727; 
    float:right;
}


#submit {
    padding:0px 8px;
    background:#c4c4c4; 
    width:115px;
    height:33px;
    border-radius:10px;
    border:1px solid #8d8d8d;
    max-width:100%;
}
#submit:hover {
    background:#a8a8a8;
    cursor: pointer;
}

div.button input {
padding:0px 8px;
    background:#c4c4c4; 
    width:80px;
    height:30px;
    border-radius:10px;
    border:1px solid #8d8d8d;
    margin:1px;
    max-width:100%;
}

div.button input:hover {
background:#a8a8a8;
    cursor: pointer;
}

Large screens:

#details_section {
    width:320px;
}

Medium Screens:

#center{
width: 465px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#contact_section {
width:450px;

}

#details_section {
    width: 450px;
    text-align:justify;
}

#details_section h2 {
    width: 450px;
    text-align:center;

}

textarea, input[type="text"] {
    width: 100%;
    max-width: 450px;
}

textarea{
    max-width: 450px;
    height: 150px;
}

Small Screens:

#center{
width: 465px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#contact_section {
width:450px;

}

#details_section {
    width: 450px;
    text-align:justify;
}

#details_section h2 {
    width: 450px;
    text-align:center;

}

textarea, input[type="text"] {
    width: 100%;
    max-width: 450px;
}

textarea{
    max-width: 450px;
    height: 150px;
}


Solution :

I would recommend using an Element Inspector to get the look just right on your page. All modern browsers include them. It seems like all you need are little CSS tweaks here and there. For example, you can set your inputs to a different width in the small and medium layouts (line 116 change to width:90%).

It's important to gain a proper understanding of box-sizing and how that works. It seems like compounded margins and padding are what's causing elements to overflow. http://css-tricks.com/box-sizing/


    CSS Howto..

    How to use jQuery to detect loaded background image after inserting out CSS

    Show s horizontally in a div
    table { display: inline-block; } This should work just fine for you....
    Read more

    How to add a sliding div to these CSS Message Bubbles?

    How do you position CSS elements directly under each other?

    How to calculate x and y of a circle for CSS

    How can I align unsorted list horizontly ?

    Space between list, space on left side of the ul. How to remove this?

    How can I make responsive image take up 100% of its parent's height?

    How to uniformly darken colors?

    How can I vertically center this css/javascript based modal dialog?

    How to Hide a Textbox with only CSS

    How to calculate padding-top in % of the given div relative to its parent div

    How to change an input button image using CSS?

    How to properly make my own list-style?

    How to append bind-attr class to initial one in Ember?

    How to let Materialize use classes for dropdowns and not ID's?

    How do I adjust the height of the pikaChoose plugin without ruining the width?

    How well do you need to know HTML before delving into CSS?

    How to clean style sheets mess? [duplicate]

    How can I apply a css transition to an element when its parent is hovered?

    Bootstrap glyphicon/nav bar showing popup window

    How to align horizontally list if there is a sublist css

    How to apply Title Case in input box through css

    How to be able to preload jquery contents into hidden tabs for ie browser

    does anyone know how to do this css transition? [closed]

    If a child has a certain specific value, how to check and make “true” so that hover of the parent yields a result?

    How to make a different background for each link from a navbar? [closed]

    How to convert css into bss

    IcoMoon App icon fonts are shown as 

    I'm making a chatbox. I have a div and input field inside of a div. I want them to resize in a particular way. How do I do this, preferably with css?