Chapter Summary. The element defines keyboard input; The element defines sample output from a computer program; The element defines a piece of computer code; The element defines a variable in programming or in a mathematical expression; The element defines preformatted text
HTML Layout - HTML Responsive Web Design - W3Schools
I think your negative impression is right. It doesn't implement the features you'd expect in responsive design.
The key to your question is that Google Sites don't use a viewport declaration (meta viewport in the head element). If you don't have that, then device browsers treat you as a legacy desktop-only website. They assume you'll break completely below ~830px, and set a page min-width accordingly. That doesn't sound much like responsive design to me.
Google Sites don't let you write your own CSS or HTML HEAD, so you can't implement a more responsive design yourself.
To be fair, you can choose to not set a fixed page width. Also navigations buttons will reflow on relatively narrow windows, if you're using the "horizontal navigation" feature. The latter isn't great design but at least it's degrading gracefully.
There is an option "Automatically adjust site to mobile phones" under Manage site -> General. However many people suggest it's better not to use it :). I tried enabling it on an old site, previewing the page, and selecting "preview in mobile". At least on Firefox on my original netbook (800px width), it was not responsive. It didn't expand to use the 800px screen properly.
As an aside, the line-wrapping (or absence of it) is a pre-existing issue with my site. You could blame this on me for not testing it :). However it illustrates a limitation of the WYSIWYG editor in Google Sites. It doesn't show, check for, or filter out the formatting that causes this problem.
Solution : (I stripped most of your containers to make it simple to understand and work with)
html,
body,
.section-images {
height: 100%;
margin: 0;
}
.section-images {
margin: auto 2em;
text-align: center;
}
img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 90%;
margin: 20px auto;
}
<section class="section-images">
<a href="#"><img src="http://i.imgur.com/hMRnvUx.jpg" /></a>
<div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
<a href="#"><img src="http://i.imgur.com/lBuIEDh.jpg" /></a>
<div class="image-description">blabla2</div>
<a href="#"><img src="http://i.imgur.com/k8BtMvj.jpgg" /></a>
<div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
</section>
Explanation :
This solution is based on the fact that percentages sizes (width and height) are relative the size of the parent element.
Considering .section-images<body>
html, body, .section-images {
width:100%;
height:100%;
margin:0;
}
So the direct parent of the images equals viewport size.
Then, you can size your images easily using :
img{
width:auto;
height:auto;
max-width:100%;
max-height:90%;
}
Images will never exceed 100% width and 90% height of viewport while keeping their aspect ratio. And they will stay in the flow of the document.
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ gives you an introduction to the various aspects of the viewport meta tag. For optimizations across a range of screen sizes, you probably want to use <meta name="viewport" content="width=device-width">
Note that the Element Fusion tutorial you linked to uses semicolon delimiters between viewport values instead of commas - this is not correct. Be sure to use commas, like in your initial example :-)