treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Responsive Layout Not adapting margin-left as div width decreases.

  • Hi,
    Sorry for all the niggly questions but I have another one.

    The page I'm talking about can be seen here http://iamdannygreen.com/test

    As you can see I have three columns underneath my welcome header (please excuse the gastly bg colour, just using it so I can see the boxes), in every column there will be a icon, the green icon on the first column has a margin-left of about 32% which is fine to centre the icon when the browser width is above 980px. However, if you drag the browser window in you will notice that the icon seems to stay put rather than moving in, its as if the margin-left isn't been recalculated as the column div decreases in width. How can I keep the icon centred within the column.

    Again sorry for all the amateur questions.

    Danny

    Here is my markup:
    <h2 class="intro-message">I create stylish, easy to use websites <br/> for all different types of people.</h2>
    <h2 class="home-header">HOW I WORK</h2>
    <div class="homepage-3col">
    <img class="homepage-icon" src="images/communication_icon.png" alt="Communication"/>
    </div/>
    <div class="homepage-3col">

    </div/>
    <div class="homepage-3col">

    </div/>


    and my CSS:

    .homepage-3col {
    background-color:#123;
    height:300px;
    width:29.251706%;
    float:left;
    margin-left:3.2%;
    }

    .homepage-icon {
    margin-left:32.2093%;
    margin-top:30px;
    }

  • dont know what else you want to put in your div, but one solution could be


    .homepage-3col {
    text-align: center;
    }

    .homepage-icon {
    margin-top:30px;
    }

  • Sorry I forgot to mention that there will be a small paragraph of text under each icon which I would prefer not to be centred.

  • .homepage-3col p {text-align: left}
  • Thanks Timmey, didn't think it would be that simple but it was.