How To Add Widgets In The Footer?

A media query is a section of your CSS file that allows you to change the appearance of your site by applying certain CSS rules when the width of the screen changes. That’s what makes the site “responsive.” For example, if you start making your browser window narrower, you’ll see that the title gets centered and the menu jumps underneath, also centered. Then if you make it even narrower, the menu changes into a drop-down list. This is all controlled by media queries.

If you look in your virtual menus_menu1_mobile.css file, you’ll see a section that reads:

@media only screen and (max-width: 767px) {
... // CSS rules
}

You’ll see some CSS rules inside the braces. All of those rules are used if the width of the screen is less than 767px. For example, one rule sets menu1 to display: none;, which hides the main menu, while another rule shows .menu1-mobile (the drop down list) by setting display: block.

If you look at your index.php virtual main template, you’ll see a DIV with the id of container that was commented out (and the end tag is at the bottom). You can try uncommenting out the tags and adding a margin-left: 30px; rule for #container in menu_menu1_mobile.css to see if that gives you enough space.

Since you are a beginner, here are a few helpful links:
CSS Tutorial
Everything you want to know about using media queries
The Firebug browser extension allows you to examine elements in your site. Learn to use it.