I've been working on some partial sections. I have two columns of 50% width one with image and other with four boxes of contact address. What I did was placed the image with a specific height but that doesn't seem to work fine with the media queries. So I've gone through some previously asked questions and found out one of them working for me. Everything is fine until I get the section responsive. The image is either getting too large(not aligning to the neighbor col) or getting small. I need to specify the padding each time I change my responsive tab. I need the Image to set its height dynamically.
I know its something tiny but I can't figure it out.
Here is working Fiddle followed by the code I've tried.
.our-specials {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.our-specials .column-6 {
width: 50%;
float: left;
display: table;
flex-wrap: wrap;
justify-content: center;
color: #fff;
}
.col-6 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.our-image {
background: url("https://preview.ibb.co/fGwp8R/nintendo_switch_with_red_and_blue_neon_joy_con_controllers.jpg");
background-repeat: no-repeat;
padding-top: 61.766%;
background-size: cover;
}
.contact-details {
text-align: center;
}
.contact-inner {
height: 318px;
width: 50%;
padding: 0 60px;
display: table-cell;
vertical-align: middle;
}
.contact-inner i {
font-size: 35px;
margin-bottom: 10px;
color: #c8001a;
}
.contact-inner p {
font-size: 14px;
color: #6f6f6f;
}
.bg-black {
background-color: #000000;
}
.bg-extra-dark-grey {
background-color: #1c1c1c
}
@media only screen and (max-width: 1024px) {
.our-image {
padding-top: 88.166%;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="section-row our-specials clearfix" style="padding-bottom: 0;">
<div class="col-6">
<div class="our-image"></div>
</div>
<div class="col-6">
<div class="contact-details">
<!-- start contact item -->
<div class="column-6 bg-extra-dark-grey">
<div class="contact-inner">
<i class="fa fa-map-o"></i>
<div class="contact-title">Contact Address</div>
<p class="width-60 md-width-80 center-col text-medium">301 The Greenhouse, Custard Factory, London, E2 8DY.</p>
</div>
</div>
<div class="column-6 bg-black">
<div class="contact-inner">
<i class="fa fa-comments-o"></i>
<div class="contact-title">Let's Talk</div>
<p class="center-col text-medium no-margin">Phone: 1-800-222-000</p>
<p class="center-col text-medium">Fax: 1-800-222-002</p>
</div>
</div>
<div class="column-6 bg-black">
<div class="contact-inner">
<i class="fa fa-envelope-o"></i>
<div class="contact-title">Email Us</div>
<p class="center-col text-medium no-margin"><a href="mailto:info@domain.com">info@domain.com</a></p>
<p class="center-col text-medium"><a href="mailto:hire@domain.com">hire@domain.com</a></p>
</div>
</div>
<div class="column-6 bg-extra-dark-grey">
<div class="contact-inner">
<i class="fa fa-clock-o"></i>
<div class="contact-title">Working Hours</div>
<p class="center-col text-medium no-margin">Mon to Sat - 9 AM to 11 PM</p>
<p class="center-col text-medium">Sunday - 10 AM to 6 PM</p>
</div>
</div>
</div>
</div>
</div>Help me out. Thanks in Advance.
