marcp marcp - 3 months ago 15
PHP Question

switching orientation of flex container

In a wordpress template I generate the following html:

<article class="home-post-container">
<div class="home-post-thumb">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} ?>
</div>
<div class="home-post-content">
<h4 class="post-title">
<?php the_title(); ?>
</h4>
<?php the_content(); ?>
</div>
</article>


I want to use a flex container to cause the
.home-post-content
to be beside the
.home-post-thumbnail
on the desktop, and below the thumbnail on smaller screens.

I've created the following CSS but the orientation isn't switching when it should (ie at 400px).

The rendered page is always
flex-direction: row
regardless of the screen width.

.home-post-thumb{
flex: 1;
margin: auto;
}
.home-post-content{
flex:3 ;
}
@media (min-width: 401px;){}
.home-post-container{
display:flex;
-webkit-flex-direction: row;
flex-direction: row;
padding: 1vw 1vw;
}
}
@media (max-width: 400px;){
.home-post-container{
display:flex;
-webkit-flex-direction: column;
flex-direction: column;
padding: 1vw 1vw;
}
}

Answer

Your CSS is invalid. Rules inside @media query do not need a closing semicolon ; and having them will break the query.

Also you opened a media query and closed it at the same line @emdia (condition){} thus making it obsolete.

The correct code would be like this:

.home-post-container { border:1px solid; padding: 1em; }

@media (min-width: 400px) {
  .home-post-container {
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .home-post-content { flex: 1; padding: 1em; }
}
<article class="home-post-container">
  <div class="home-post-thumb">
    <img src="http://placehold.it/200x200" alt="">
  </div>
  <div class="home-post-content">
    <h4 class="post-title">title</h4>
    <p>content</p>
  </div>
</article>

jsFiddle: https://jsfiddle.net/azizn/4copxqdj/

P.S try to provide generated HTML instead of WordPress PHP code next time.

Comments