7 Replies Latest reply on Nov 17, 2012 9:11 AM by Nancy OShea

    responsive design - can't get "padding" to take

    debibrighthope Level 1

      Hi,

       

      I have this site that I'm converting to responsive/adaptive... and on the wine page the text is way to close to the edge of the div.  and I can't get anything to work to adjust it... I know I'm missing something but I don't know what.

       

      http://monkeycat.com/responsive/wine.htm

       

      Any suggestions are appreciated during this learning curve....

       

      TIA

        • 1. Re: responsive design - can't get "padding" to take
          Nancy OShea Adobe Community Professional & MVP

          Validate code and fix your errors.

          http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmonkeycat.com%2Fresponsive%2Fwine .htm

           

          Fluid.css is for layout only.  Use a separate stylesheet for content. 

          I don't use tables much.  I would probably use Definition Lists for the wines.

          http://www.maxdesign.com.au/articles/definition/

           

           

           

           

          Nancy O.

          • 2. Re: responsive design - can't get "padding" to take
            debibrighthope Level 1

            Ok Nancy...hadn't thought about the validation "issues"...thanks for the reminder.  I'll look into it for sure....

             

            Thanks!!

            • 3. Re: responsive design - can't get "padding" to take
              debibrighthope Level 1

              what do you mean  when you say "fluid.css" is for the layout only?  I should have a different css file for all my classes, etc??

              • 4. Re: responsive design - can't get "padding" to take
                BenPleysier Adobe Community Professional & MVP

                Please have a look at the following markup and CSS, especially the highlighted part.

                 

                <!doctype html>

                <html>

                <head>

                <meta charset="utf-8">

                <title>Untitled Document</title>

                <style>

                * {

                    -webkit-box-sizing: border-box;

                    -moz-box-sizing: border-box;

                    box-sizing: border-box;

                }

                body {

                    background: white;

                }

                .grid {

                    overflow: hidden; /* clearfix is better */

                    padding-left: 20px;

                    padding-top: 20px;

                    width: 80%;

                    margin: auto;

                    background: rgba(0, 0, 0, 0.5);

                }

                .grid:first-child {

                    padding-top: 0;

                }

                .grid:last-child {

                    padding-bottom: 20px;

                }

                [class*='col-'] {

                    float: left;

                    padding-right: 20px;

                }

                .col-2-3 {

                    width: 66.66%;

                }

                .col-1-3 {

                    width: 33.33%;

                }

                .col-1-4 {

                    width: 25%;

                }

                .module {

                    padding: 20px;

                    background: rgba(0,0,0,0.5);

                }

                </style>

                </head>

                 

                <body>

                    <header>

                        <h1>Sitename</h1>

                    </header>

                <section class="grid">

                <h1>Don't overthink It Grids</h1>

                    <div class="col-2-3">

                      <article class="module">

                      <h2>Header</h2>

                      <p>Quis nostrud exercitation velit esse cillum dolore lorem ipsum dolor sit amet. Consectetur adipisicing elit, excepteur sint occaecat cupidatat non proident. Sunt in culpa in reprehenderit in voluptate sed do eiusmod tempor incididunt. Ullamco laboris nisi qui officia deserunt duis aute irure dolor. Eu fugiat nulla pariatur.</p>

                    </article>

                  </div>

                    <div class="col-1-3">

                      <article class="module">

                      <h2>Header</h2>

                      <p>Quis nostrud exercitation velit esse cillum dolore lorem ipsum dolor sit amet. Consectetur adipisicing elit, excepteur sint occaecat cupidatat non proident. Sunt in culpa in reprehenderit in voluptate sed do eiusmod tempor incididunt. </p>

                    </article>

                  </div>

                </section>

                <section class="grid">

                    <div class="col-1-4">

                      <article class="module">

                        test

                    </article>

                  </div>

                    <div class="col-1-4">

                      <article class="module">

                        test

                    </article>

                  </div>

                    <div class="col-1-4">

                      <article class="module">

                        test

                    </article>

                  </div>

                    <div class="col-1-4">

                      <article class="module">

                        test

                    </article>

                  </div>

                </section>

                </body>

                </html>

                Modern browsers add borders, and padding to the size of the box; IE5 used to include these in the size of the box. The highlighted code resets the browser to revert back to the IE5 days, making it a lot easier for use in fluid layouts.

                • 5. Re: responsive design - can't get "padding" to take
                  debibrighthope Level 1

                  Ok...it now passes...now to move onto learning how to center items in html5 and css3!!

                  • 6. Re: responsive design - can't get "padding" to take
                    debibrighthope Level 1

                    Thanks...I get the box model stuff pretty well.. I'm just having a hard time wrapping my head around how to center individual items.

                    • 7. Re: responsive design - can't get "padding" to take
                      Nancy OShea Adobe Community Professional & MVP

                      Centering a container with CSS requires 3 things:

                      1.      A valid doc type
                      2.      A container width
                      3.      Margin-left and margin-right of auto

                       

                      Centering text:

                          .center {text-align:center}

                       

                      <p class="center">This is centered text</p>

                       

                       

                      Nancy O.