Flexbox layout of entry and sub entries ... with scaling images

Hoping someone can give me clues or links.

cheers Laughing out loud

HTML ...
included as attachment. (Squirrel-1_html.txt)

..

CSS ...

    .media {
        display: flex;
        flex-flow: row;  
    }
 
    .figure {
        flex: 1 1 33%;
        align-self: flex-start;
        order: 0;
        padding: 0 5px 0 0;
        max-height: 300 px;
        width: auto;
    }
 
    .media-body {
        flex: 1 1 66%;
    }
 
    p {
        margin: 0 10px 20px 10px;
    }

Website applying multiple media queries

I'm testing a web site at www.trsgraphics.com/brittany/. I'm trying to use multiple media queries for responsive formatting. The project is coming along, but there appears to be a strange twist:it looks like the smartphone and tablet pages are displaying styles from multiple CSS source files. There are other problems with images appearing at unexpected sizes, but that is an issue for another trip through the forums.

The media queries, from the file http://www.trsgraphics.com/brittany/_css/mediaqueries.css, are:

@charset "UTF-8";
/* #### Mobile Phones Portrait ####  red*/

Syndicate content