How can I make my HTML elements be equal column width when the window is shrunk in CSS liquid design?

Question

I have my code in this fiddle: fiddle

1. I have two HTML element columns:

   <aside>This is the aside</aside>
   
   <section>This is the section</section>
   

The <aside> is at 33% width of the <div id="wrapper"> while the <section> is at 66% (The <div id="wrapper"> itself is at 100% of the opened internet window browser).

When I shrink the window, I want the columns to stack right on top of each other in an equal column width (so that would require changing each of the width from either the 33% (or 66%) to 100% when the window is shrunk).

But I'm having trouble doing this.

2. is it possible to have another separate <div id="background1"> and <div id="background2"> that would overlap behind the <aside> and <section> elements and change width columns along with them as a background?

How may I do this?

Thanks for all the help

Answer 1

You can use a media query

Updated fiddle

@media screen and (max-width: 430px) {
  aside, section {
    width: auto;
    float: none;
  }
  footer {
    padding: 10px 10px;
  }     
}