I cant make a grid of my layout

  • Resolved Nick12123

    (@nick12123)


    9 years, 9 months ago

    i tried everything (i dont want to use plugins coz i want to use my own them)

    my index.php code

    <?php
    get_header();

    if (have_posts()) :
    while (have_posts()) : the_post();?>

    <div class=”container”>
    <div class=”section group”>
    <div class=”col span_1_of_3 “>
    <div class=”card “>
    <div class=”card-image”>
    <?php if ( has_post_thumbnail() ) {
    the_post_thumbnail(“medium”);
    }?>
    <span class=”card-title”>” class=”white-text”> <?php the_title(); ?> </span>
    </div>
    <div class=”card-content”>
    <p><?php the_content(); ?></p>
    </div>
    <div class=”card-action”>
    ” class=”button”>Read More…
    </div>
    </div>
    </div>
    </div>
    </div>

    <?php endwhile;

    else:
    echo “<p>No Post Found</p>”;
    endif;
    get_footer();
    ?>

    and style.css code

    .section {
    clear: both;
    padding: 0px;
    margin: 0px;
    }

    /* COLUMN SETUP */
    .col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
    }
    .col:first-child { margin-left: 0; }

    /* GROUPING */
    .group:before,
    .group:after { content:””; display:table; }
    .group:after { clear:both;}
    .group { zoom:1; /* For IE 6/7 */ }
    /* GRID OF THREE */
    .span_3_of_3 { width: 100%; }
    .span_2_of_3 { width: 66.13%; }
    .span_1_of_3 { width: 32.26%; }

    /* GO FULL WIDTH BELOW 480 PIXELS */
    @media only screen and (max-width: 480px) {
    .col { margin: 1% 0 1% 0%; }
    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
    }

    i use materlize css so in it by using m5 tag it divides m10 and makes a grid but here i used external css and code as m5 is not working. anyone knows how can i make a grid possible?

Viewing 2 replies - 1 through 2 (of 2 total)

  • I think the container and the grouping should be outside of the loop.
    Try this:

    <?php
    get_header();

    <div class=”container”>
    <div class=”section group”>
    if (have_posts()) :
    while (have_posts()) : the_post();?>
    <div class=”col span_1_of_3 “>
    <div class=”card “>
    <div class=”card-image”>
    <?php if ( has_post_thumbnail() ) {
    the_post_thumbnail(“medium”);
    }?>
    <span class=”card-title”>” class=”white-text”> <?php the_title(); ?> </span>
    </div>
    <div class=”card-content”>
    <p><?php the_content(); ?></p>
    </div>
    <div class=”card-action”>
    ” class=”button”>Read More…
    </div>
    </div>
    </div>

    <?php endwhile;

    </div>
    </div>

    else:
    echo “<p>No Post Found</p>”;
    endif;
    get_footer();
    ?>

    Thread Starter Nick12123

    (@nick12123)

    hey thanks for the reply but after playing with code i got the grid but it looks unstyled

    here’s the pic: https://drive.google.com/open?id=0B15-Fek9IBEpNTU4RlM1dXhtTFk&authuser=0

    here’s the new code :-

    <?php
get_header();

?>

<div class="container">
	<?php
		$category_ID = get_category_id('blog');
		$args = array(
			 'post_type' => 'post',
			 'posts_per_page' => 5,
			 'post__not_in' => $slider_arr,
			 'cat' => '-' . $category_ID
			 );
		query_posts($args);
		$x = 0;
		while (have_posts()) : the_post(); ?>
		<div class="container">
	 <div class=" home_box">
        <div class="col m5">
          <div class="card">
            <div class="card-image">
               <?php if ( has_post_thumbnail() ) {
  the_post_thumbnail("medium");
}?>
              <span class="card-title"><a href="<?php the_permalink(); ?>" class="white-text"> <?php the_title(); ?> </a></span>
            </div>
            <div class="card-content">
              <p><?php the_content(); ?></p>
            </div>
            <div class="card-action">
              <a href="<?php the_permalink(); ?> " class="button">Read More...</a>
            </div>
          </div>
        </div>
      </div>
 </div>
</div>

	<?php endwhile;

	get_footer();
?>

    here’s the new css :-

    .home_box { display: block;
	float: left;
	overflow: hidden;
	padding: 18px 10px;
	-webkit-perspective: 500;
	-moz-perspective: 500;
	-ms-perspective: 500;
	perspective: 500;
	}

    iso far i tried to play with margines but i cant make the 1st box work

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘I cant make a grid of my layout’ is closed to new replies.