arcticle resize automatically by screen size - php

Question

i have a menu in the left and i want the site-content resize by changing the screen size. actually like in https://myspace.com/
what i have now:
the menu in the left side. this is the code:
.main-navigation {
background-color: #000000;
border-left: 1px solid #cccccc;
display: block;
float: left;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: normal;
max-width: 50%;
position: absolute;
top: 85px;
width: 150px;
height: auto;
text-align: right;
text-transform: capitalize;
}
the site-content i putted margin-left 150px to put the content after the menu because if not, the content is under the menu. :
.blog .site-content,
.archive .site-content,
.search .site-content {
margin: 0 auto;
max-width: 885px;
position: relative;
left: 0px;
margin-left: 150px;
}
and the article that inside:
.blog .site-content .hentry,
.archive .site-content .hentry,
.search .site-content .hentry {
float: left;
margin: 0;
overflow: hidden;
width: 295px;
height: 295px;
}
the main-index is:
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'content', 'home' );
?>
<?php endwhile; ?>
<?php pictorico_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_footer(); ?>
the nav(menu) is in the header so the header:
<?php wp_head(); ?>
>
<header id="masthead" class="site-header" role="banner">
<div class="site-header-inner">
<div class="site-branding">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h1 class="menu-toggle"><span class="screen-reader-text"><?php _e( 'Menu', 'pictorico' ); ?></span></h1>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'pictorico' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
<div class="header-search">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<?php if ( is_home() && pictorico_has_featured_posts( 1 ) ) : ?>
<?php get_template_part( 'content', 'featured' ); ?>
<?php elseif ( get_header_image() && ( is_home() || is_archive() || is_search() ) ) : ?>
<div class="hentry has-thumbnail">
<div class="entry-header">
<div class="header-image" style="background-image: url(<?php header_image(); ?>)">
<span class="screen-reader-text"><?php bloginfo( 'name' ); ?></span>
</div>
</div>
</div>
<?php endif; ?>
<div id="content" class="site-content">

Answer 1

It's a bit late to implement now, but next time look at something like Bootstrap or Zurb Foundation for frameworks that make it really fast to build responsive web apps. They take away the need for complicating things with media queries. Just a thought

Answer 2

Your content is not going to re-size because you have given it a fixed width (295px). Since you floated them, they should just re-arrange themselves based on how much room there is in site-content.
If you actually want the articles to re-size, give them percentage widths. Then, as site-content changes width, they will also.
If you want to keep the aspect ratio (height/width), then you need a wrapper that maintains the aspect ratio using % padding and put the content in it using postion: absolute. See, for example, Maintain the aspect ratio of a div with CSS.