Need help with grid sizing

Discussion in 'Web Design' started by Kit_Pantelope, Mar 30, 2017.

to remove all ads.
Thread Status:
Not open for further replies.
  1. Kit_Pantelope

    Kit_Pantelope New Member

    Messages:
    16
    Hey, my grid's acting funny because not all text is equal. Was thinking maybe a clearfix would fix this, but wanted to see what you all have to say.

    Mind checking out my pen? http://codepen.io/kit_navo/pen/EWOojV
     
    mishraviplav7877 likes this.
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    Define;
     
  3. Kit_Pantelope

    Kit_Pantelope New Member

    Messages:
    16
    Lol. Is this a Mitch Hedberg joke?

    I mean some text takes up more lines than others which affects the div boxes, and makes for the lopsided grid.
     
  4. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    No idea who that even is.


    I don't even bother looking at these code juggling things, mostly because they get in the way, just provide a real URI please.
     
  5. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    Oh and if you don't have any real hosting set up, I can help there as well.
     
  6. Kit_Pantelope

    Kit_Pantelope New Member

    Messages:
    16
    I have some real hosting through godaddy, but I haven't uploaded this document. And, I'm not too comfortable with uploading it so it may be a day or two.
     
  7. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    Just post the source (and any external image references) so I can I put it on my dev server, sounds glamorous but these days it's just a Raspberry Pi on a shelf, running Apache. :)
     
  8. Kit_Pantelope

    Kit_Pantelope New Member

    Messages:
    16
    <head>
    <title>Elements of Design by Kitteryk Novask</title>
    <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700|Open+Sans:400,400i,700" rel="stylesheet">
    </head>


    <body>
    <header class="main-header">
    <div class="container clearfix">
    <h1 class="name"><a href="#">Elements of Design</a></h1>
    <ul class="main-nav">
    <li><a href="">Agency</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Projects</a></li>
    </ul>
    </div>
    </header>

    <div class="banner">
    <img class="logo" src="https://image.ibb.co/irCWdv/foxplaceholder_1.png" alt="foxplaceholder_1">
    <h1 class="headline">We should know the principals of design</h1>
    <span class="tagline">Because without them, we'll never turn visitors into customers</span>
    </div>
    <!-- end of banner-->

    <div class="container clearfix" <section class="container col">
    <section class="col">
    <h2 class="grid-headtag">Aesthetic-Usability Affect</h2>
    <p>Lorem ipsum dolor sit amet, usu ad nulla antiopam, quodsi sanctus at eum, dissentiet appellantur in quo.</p>
    </section>

    <section class="col">
    <h2 class="grid-headtag">Alignment</h2>
    </section>

    <section class="col">
    <h2 class="grid-headtag">Garbage In, Garbage Out</h2>
    </section>

    <section class="col">
    <h2 class="grid-headtag">Hierarchy</h2>
    </section>

    </div>
    <!-- end of container clearfix -->

    <footer class="main-footer">
    <span>&copy;Kit Navo of Pantelope</span>
    </footer>

    </body>
     
  9. Kit_Pantelope

    Kit_Pantelope New Member

    Messages:
    16
    /**********************
    Base Styles
    **********************/

    * {
    box-sizing: border-box;
    }

    body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6em;
    }

    body,
    a {
    color: #36424A;
    }

    p {
    font-size: .95em;
    }

    h1,
    h2,
    h3,
    .tagline {
    font-family: 'Lora', serif;
    }

    h1 {
    font-size: 1.5em;
    line-height: 2em;
    }

    a {
    text-decoration: none;
    }

    li {
    list-style: none;
    width: 100px
    }

    .main-nav a:hover {
    color: #D51700;
    }

    .grid-headtag {
    font-size: 1.3em;
    }

    .col:hover {
    background: #D51700;
    color: #fff;
    cursor: pointer;
    }

    section p {
    font-size: .85em;
    }

    /**********************
    Base Layout Styles
    **********************/

    .main-header {
    text-align: center;
    }

    .main-nav li {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    }

    .banner {
    text-align: center;
    padding: 20px 0;
    margin: 40px
    }

    .container {
    max-width: 800px;
    margin: 0 auto;
    }

    .col {
    width: 49%;
    float: left;
    text-align: center;
    padding: 100px 30px;
    background: #fff;
    border: 2px solid #CCCAA9;
    box-sizing: border-box;
    }

    .main-footer {
    padding: 30px;
    text-align: center;
    background: #E21100;
    margin-top: 50px;
    color: #fff;
    }

    /* ---- Float clearfix ---- */

    .clearfix::after {
    content: " ";
    display: table;
    clear: both;
    }

    /****** http://www.colourlovers.com/palette/728979/Sharp ****/
     
  10. Kit_Pantelope

    Kit_Pantelope New Member

    Messages:
    16
    There you go. I didn't know how to post code here, so I improvised.
     
  11. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    It's the "insert" icon, to the left of the 'save' button.

    Okay, when you 'float' elements that are going to have variable height text content you need to give them a fixed height.

    And to avoid individual scroll bars use overflow: hidden; on the child elements.
     
  12. Kit_Pantelope

    Kit_Pantelope New Member

    Messages:
    16
    you're a beast; the height made it work perfectly! and fyi, if you want to listen to some funny shit, check out mitch hedberg. his jokes are really funny.

    Thanks for the tip on posting code.

    In this case, do I need to apply overflow property to the class .col or to the elements inside .col?
     
  13. Kit_Pantelope

    Kit_Pantelope New Member

    Messages:
    16
    I just added overfloiw to .col, seems to work great.

    Thanks again!
     
  14. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    I would argue the case for using min-height instead of height as then if it DOES blow out it stays within its box.
     
Thread Status:
Not open for further replies.

Share This Page