Looking for help with styling the first and second div elements with the threecolx class differently without adding extra classes.
HTML
<div class="threecolx mobile-hidden">
<div class="contact-box">
<span class="promo-text">Family run for over</span>
<span class="promo-date">- 30 Yrs -</span>
</div>
</div>
<div class="sixcolx">
<!-- Desktop Logo -->
<div id="hdr-logo">
<a href="{SELF_URL}" title="{SITE_NAME}"><img src="/img-src/{v2_FOLDER}/theme/logo.png" alt="{SITE_NAME}" class="responsive-img"/></a>
</div>
<!-- // END Desktop Logo -->
</div>
<div class="threecolx">
<div class="contact-box">
<!-- Social Icons -->
<div class="telephone"><a href="/contact.php" title="Contact Us"><span class="fa fa-phone"></span> {v2_TELEPHONE_NUMBER}</a></div>
<div class="email mobile-hidden"><a href="/contact.php" title="Email us"><span class="fa fa-map-marker"></span> Find Us</a></div>
<!-- // Social Icons -->
</div>
</div>
<div class="clearfix"></div>
Styling styles applied for your reference:
@media screen and (max-width:1200px) {
#header .row {
.threecolx:nth-child(1) .contact-box {
float: right;
}
.threecolx:nth-child(2) .contact-box {
float: left;
}
}
}
Encountering an issue with only the first threecolx div being styled. Does the nth-child selector need adjustments?