My footer is not responsive - html

Question

I have a two collumn footer that doesn't resize when I make my browser smaller (columns just stack on to of eachother) and hit the 3rd breakpoint in media queries. Any idea what should I change? Complete fiddle is here: https://jsfiddle.net/Cilvako/9wkquboa/
<footer>
<div class="small_left">
<p>Bacon ipsum dolor amet shoulder spare ribs venison cow salami, turducken ham hock tail bacon tri-tip. Ground round jowl filet mignon cupim. Drumstick ribeye porchetta cow andouille. Jerky sirloin kevin ribeye salami doner ground round. Beef ribs pork
porchetta meatloaf doner swine jowl tail kielbasa tenderloin frankfurter rump meatball. Beef meatball jerky andouille, corned beef doner chicken tri-tip pastrami porchetta spare ribs ham meatloaf. Bresaola capicola frankfurter filet mignon turducken</p>
</div>
<div class="small_right">
Turducken cow tenderloin, landjaeger fatback beef pork doner brisket boudin leberkas salami tongue. Pork belly biltong tongue alcatra turducken rump doner venison ham hock pig leberkas landjaeger sirloin kielbasa. Cow bacon t-bone ball tip kielbasa.
© Silvia Bogdan, 2015
footer {
width: 100%;
font-family: BrandonGrotesque-Regular, "futura-pt-1", "futura-pt-2", Verdana, serif;
font-size: 16px;
line-height: 25px;
margin-bottom: 0px;
clear: both;
}
/*left div footer*/
.small_left {
border: 1px solid black;
letter-spacing: 1px;
padding: 20px;
background-color: black;
color: white;
text-align: justify;
font-size: 13px;
}
/*right div footer*/
.small_right {
border: 1px solid black;
letter-spacing: 1px;
height: 175px;
padding: 20px;
background-color: black;
color: white;
font-size: 13px;
text-align: justify;
}
and the Media Query where I get in trouble:
#media screen and (min-width: 769px) and (max-width: 1200px) {
footer {
width: 100%;
font-family: BrandonGrotesque-Regular, "futura-pt-1", "futura-pt-2", Verdana, serif;
font-size: 16px;
line-height: 25px;
margin-bottom: 0px;
clear: both;
/*border: 1px blue solid;*/
}
/*left div footer*/
.small_left {
letter-spacing: 1px;
display: inline-block;
width: 44%;
height: 252px;
background-color: black;
color: white;
text-align: justify;
font-size: 12px;
float: left;
}
/*right div footer*/
.small_right {
letter-spacing: 1px;
display: inline-block;
width: 44%;
height: 252px;
height: 175px;
background-color: black;
color: white;
font-size: 12px;
text-align: justify;
float: right;
}
}

Answer 1

You aren't specifying any CSS for smaller screens. So it will go back to your default CSS rules. Your default rules have no width specified for these divs so it uses the default of 100%.
If you want this to change you need to add another media section for small screens.
#media screen and (max-width : 768px) {
// put your rules here
}

Answer 2

You need to check your code over before asking a question.
You haven't ended a starting tag
<div class="small_right">

Answer 3

I noticed there are some unclosed HTML tags so
correct all markup issues before modifying your CSS.
I suggest you to use box-sizing: border-box in order avoid trivial calculation of the width.
Add this on top of your CSS file
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
I saw in your code: width:47%;
If you use box sizing border-box then all padding and borders will be set as part of the actual width of your div, defined in your CSS. So your footer would not break after setting the width as 50% and float left, float right to your two footer containers.
Simply correct your media query for mobile, and add to each footer divs:
// Add your ideal mobile breakpoint
#media screen and (max-width : 640px) {
.small_left {
width:50%;
float:left;
}
.small_right {
width:50%;
float:right;
}
}