CODEWITHSUNDEEP
phphtmlcsswordpressflexbox
marcp
marcp

Reputation: 1227

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;
    }
}

Upvotes: 1

Views: 46

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371331

Your CSS can be simplified. It also contained a few syntax errors.

.home-post-container {
    display: flex;
    padding: 1vw;
}
.home-post-thumb {
    flex: 1;
    margin: auto;
    border: 1px solid red;
}
.home-post-content {
    flex:3;
    border: 1px solid red;
}
@media (max-width: 400px) {
    .home-post-container { flex-direction: column; }
}
<article class="home-post-container">
    <div class="home-post-thumb">POST THUMBNAIL</div>
    <div class="home-post-content">
        <h4 class="post-title">POST TITLE</h4>
        POST CONTENT
    </div>
</article>

jsFiddle

Upvotes: 1

Aziz
Aziz

Reputation: 7783

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.

Upvotes: 1

Related Questions