Problem Aligning content with CSS [closed]

Question

Problem Aligning content with CSS [closed]

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

You can see right on the site at this link: link

Can anyone tell me why the episode grid is looking like this:

ThecodeI'musingis:

<divclass="row">

    <?php

    $counter    =   0;

    $episodes   =   $this->crud_model->get_episodes_of_season($season_id);

    foreach ($episodes as $row2):

    ?>

    <div class="col-md-3">

    <a href="#" onclick="jwplayer().playlistItem(<?php echo $counter++;?>)">

    <img src="<?php echo $this->crud_model->get_thumb_url('episode' , $row2['episode_id']);?>" 

    style="height: 150px; margin-top:10px;" /></a>

    <br>

    <h5><?php echo $row2['title'];?></h5>

    </div>

    <?php endforeach;?>

    </div>

And at the top of the page is a css with this code:

	.movie_thumb{}
	
.btn_opaque{font-size:20px; border: 1px solid #939393;text-decoration: none;margin: 10px;background-color: rgba(0, 0, 0, 0.74); color: #fff;}
	
.btn_opaque:hover{border: 1px solid #939393;text-decoration: none;background-color: rgba(57, 57, 57, 0.74);color:#fff;}
	
.video_cover {position: relative;padding-bottom: 30px;}
	
.video_cover:after {
	content : "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(<?php echo $this->crud_model->get_poster_url('series' , $row['series_id']);?>); 
	width: 100%;
	height: 100%;
	opacity : 0.2;
	z-index: -1;
	background-size:cover;
	}
	
.select_black{background-color: #000;height: 45px;padding: 12px;font-weight: bold;color: #fff;}
	
.profile_manage{font-size: 25px;border: 1px solid #ccc;padding: 5px 30px;text-decoration: none;}
	
.profile_manage:hover{font-size: 25px;border: 1px solid #fff;padding: 5px 30px;text-decoration: none;color:#fff;}

php html css

asked by anonymous 11.12.2017 / 15:43

2 answers

Form sending to bank when updating page Syntax error in Python code. Which is? [closed]

score 2 · Answer 1

How do I respond to:

The sum of all cols must always be 12 , for example:

If you have 4 divs with class .col-*-3 then the sum will be 12 (3 + 3 + 3 + 3 = 12)
If you have 3 divs with class .col-*-4 then the sum will be 12 (4 + 4 + 4 = 12)
You can also do .col-*-6 + .col-*-3 + .col-*-3 for example (6 + 3 + 3 = 12)

In your code, there are 5 columns, that is 5 (colunas) * 3 (col-md-3) = 15, passing the limit 12.

The solution is either to limit to 4 columns (4 * 3 = 12) or to use col-md-2 (2 * 5 = 10), it would even give up to 6 columns, or compensate the space with col-*-offset-*

score 1 · Answer 2

You can create a new .row every 4 columns. You can use the $counter = 0; variable inside the loop to create a new .row .

To do this, add this if at the end of the loop foreach :

if($counter%4 == 0){
   echo '</div><div class="row dvd">';
}

if checks if $counter is a multiple of 4 and inserts a new .row by closing the previous one.

The code looks like this:

<div class="row">
   <?php
   $counter    =   0;
   $episodes   =   $this->crud_model->get_episodes_of_season($season_id);

   foreach ($episodes as $row2):
   ?>

   <div class="col-md-3">
      <a href="#" onclick="jwplayer().playlistItem(<?php echo $counter++;?>)">
         <img src="<?php echo $this->crud_model->get_thumb_url('episode' , $row2['episode_id']);?>" style="height: 150px; margin-top:10px;" />
      </a>
      <br>
      <h5><?php echo $row2['title'];?></h5>
   </div>
   <?php
      if($counter%4 == 0){
        echo '</div><div class="row">';
      }
   endforeach;
   ?>
</div>