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">
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:
and my CSS: