Use media query to order div elements vertically when page gets smaller

Question

I am designing a component for a website which is one solid inline block. It currently looks fine on a normal sized screen but when the screen gets smaller things get weird. I have tried using a media query to change some of the CSS properties to get all the divs to fall in line vertically. This doesn't seem to be working.

Also, there is an extra 10px on the bottom of this block which I have tried to remove in numerous ways and it doesn't disappear unless I set the height a solid 300px on the larger outer div. Right now I am trying to use the calc function to remove it but with no luck. If someone knows the fix to that too it would be awesome.

Here is the current media query:

@media (max-width: 500px){
    #orange-block-right, #orange-picture{
     float: left;
     display: inline;
   }}

Here is the link to the jsfiddle which will demonstrate my woes. If anyone could let me know what the issue is I would be very appreciative.

Answer 1

First of all you need to reset your left margin and width in the media query:

#orange-block-right {
    width: 100%;
    margin-left: 0;
}

Similar for the other elements.

Apart from that, erase those float and inline properties, define all these elements as blocks and center their content.