Image is not verymuch responsive - html

Question

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: [phone]</p>
<p class="center-col text-medium">Fax: [phone]</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">info#domain.com</p>
<p class="center-col text-medium">hire#domain.com</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.

Answer 1

Assuming I've understood correctly, the issue is that part of the image is being obstructed by the blocks on responsive view? If that's the case, setting the .our-image div to have background-size: contain does the trick.
.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
}
.our-image {
background-size: contain;
}
#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: [phone]</p>
<p class="center-col text-medium">Fax: [phone]</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">info#domain.com</p>
<p class="center-col text-medium">hire#domain.com</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>

Answer 2

You'll wanna use background-size: contain; on .our-image for it to maintain the aspect ration.

Answer 3

you used a class named our-image. where you arranged image as background image and set its size to cover.
That doesn't seems right. cover will always keep the size to fill your div.
1st : use image as html element. its always better and recommended.
2nd : remove background url as image.
3rd : responsiveness depends on the screen width. so use the width width : 100% or whatever size you want.
4th : define #media screen query to arrange your image for different screen size.
Simple and effective.