I realise this question has been asked before but none of the solutions i have read through have given me a fix.
Basically i have 4 responsives boxes within a div and as i move down the screen sizes the css first-child and nth-child selectors wont work EVEN though i have used the exact same code for another set of boxes below this set and this works perfectly??
As you will see the bottom 2 boxes act as normal but the top two boxes are stuck together even though the css for the margins have been set to prevent this. It's possibly an easy fix but after banging my head off this all last night I feel like giving up.
Any help would really be appreciated, thanks!
HERE is a fiddle showing exactly what is going on: http://jsfiddle.net/f284xyjh/
Here is the HTML code:
<section id="content">
<div class="container">
<div id="about">
<h1><a name="about">WE'RE GOOD... JUST ASK OUR CLIENTS!</a></h1>
<div id="about-text">
<p>Above The Fold is a Dublin based creative, digital marketing agency that provides a personal, professional and passionate service tailored specifically to each of our clients no matter the size. We specialise in creative digital solutions centred around the user and aim to provide a rich user experience for people interacting with your brand online. Blending creativity with technical know-how and research we can brand, plan, design and build your websites and online campaigns<p>
</div><!-- end of about-text -->
</div><!-- End of about -->
<div id="services">
<a name="services"></a>
<div class="service">
<div class="service-info">
<img src="images/creative-design.png" alt="Creative Design icon" />
<h3>Creative Design</h3>
<p>Creativity is at the heart of what we do. Combining creative thinking with technology to deliver beautiful websites that stand out and engage your target audience.</p>
</div>
<a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
</div>
<div class="service">
<div class="service-info">
<img src="images/branding-icon.png" alt="Branding icon" />
<h3>Branding</h3>
<p>Much more then simply the design of a website. Through strategic planning and research we create dynamic brand icons (logos) that define who you are.</p>
</div>
<a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
</div>
<div class="service">
<div class="service-info">
<img src="images/strategy.png" alt="Social Media Marketing icon" />
<h3>Social Media Strategy</h3>
<p>Social media marketing gives you an opportunity to expose your brand to a wider audience. All our campaigns are strategically planned to maximise your reach. </p>
</div>
<a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
</div>
<div class="service">
<div class="service-info">
<a href="#"><img src="images/digital-marketing.png" alt="Digital Marketing icon" />
<h3>Digital Marketing</h3></a>
<p>Your business is unique so you need an online strategy that is designed for you. We deliver research driven results that create awarenss of your brand or services</p>
</div>
<a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
</div>
</div><!-- end of services -->
</div><!-- End of content container -->
</section><!-- end of top-content section -->
And here's the CSS code:
.container {
width: 1160px;
margin: 0 auto;
overflow: hidden;
}
#content {
height: 605px;
background: #F3F3F2;
margin-top: 1px;
padding-top: 25px;
}
#about {
width: 100%;
display: inline-block;
text-align: center;
}
#about p {
font-family: "Proxima Light",Arial,helvetica,garuda,sans-serif;
font-size: 24px;
line-height: 28px;
margin-bottom: 10px;
}
#about-img {
background: url(../img/about-img.png) no-repeat;
width: 370px;
height: 154px;
float: left;
margin-right: 20px
}
#about-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
line-height: 23px;
}
#services {
width: 100%;
display: inline-block;
}
#services h3 {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #FFF;
}
#services p {
font-size: 16px;
line-height: 20px;
color: #FFF;
}
#services a {
text-decoration: none;
}
.service {
background: #3498db; url(../images/service-find-out-triangle.png) no-repeat center 256px;
width: 275px;
height: 295px;
float: left;
margin: 20px 20px 20px 0;
text-align: center;
position: relative;
}
.service:last-child {
margin-right: 0;
}
.service-info {
background: #3498db;
width: 255px;
height: 245px;
padding: 20px 10px 0;
}
.service img {
margin-bottom: 10px;
}
@media only screen and (max-width : 1224px) {
.container {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#content { height: auto;}
.service { width: 490px; margin: 20px 20px 20px 0;}
.service:first-child { margin-right: 0!important;}
.service:nth-child(2) { margin-right: 0!important;}
.service-info { width: 465px; }
}
@media only screen and (max-width : 1024px) {
.container { width: 800px;}
.service { width: 390px;}
.service-info { width: 370px; }
}
@media only screen and (max-width : 824px) {
.container { width: 680px;}
.service { width: 330px;}
.service-info { width: 310px;}
}
@media only screen and (max-width : 768px) {
.container { width: 95%;}
.service { width: 100%; margin: 20px 0;}
.service-info { width: 94%; }
}
}
