How do i hide 1/4 data loops at a certain screen resolution?

Hi how do i remove 1 out of 4 data loops at a certain screen resolution?

Here is the code that recives the data from the database

    <?php
    		$db = mysqli_connect('localhost', 'root', '', 'eb_videos');
    		$data = mysqli_query($db, 'SELECT * FROM videos ORDER BY rand() LIMIT 4');
    		$datas_video = array();
    		while($row = mysqli_fetch_assoc($data)) {
    			$video = array();
    			$video['id'] = $row['id'];
    			$video['title'] = $row['title'];
    			$video['link'] = $row['link'];
    			$video['views'] = $row['views'];
    			$video['likes'] = $row['likes'];
    			$datas_video[] = $video;
    		}
    		mysqli_free_result($data);
    	?>
         	<div id="shuffle">
    		<?php
    		$i = 0;
    		foreach ($datas_video as $key => $video) {
    			if($i == 4) {
    				$i = 0;
    			}
    						if($i == 0) {
    				echo '<div class="col-lg-12 videowrap">';
    			}
    			?>  
        <div class="inbo col-sm-6 col-lg-3 col-xs-12 col-md-4">
    				<div class="box random" data-id="<?=$video['id']?>" data-views="<?=$video['views']?>" data-likes="<?=$video['likes']?>" data-link="<?=$video['link']?>">
    					<img class="imgsis" src="http://img.youtube.com/vi/<?=$video['link']?>/0.jpg" alt="#"/>
                        <img src="img/videos/random.png" alt="Random video">
    					<span class="caption simple-caption">
    						<div class="col-xs-6">
    							<h6 class="viewtext"><?=$video['views']?></h6>
    							<img src="View.png" class="viewbox" height="30" width="30">
    						</div>
    						<div class="likewrap col-xs-6">
    							<h6 class="liketext"><?=$video['likes']?></h6>
    							<img src="Like.png" class="likebox" height="20" width="20">
    					</div>
    					</span>
    				</div>
    				<h4 class="vidtext"><?=$video['title']?></h4>
    			</div>
    			<?php
    			if($i == 3) {
    				echo '</div>';
    			}
    			$i++;
    		}
    		?>
    		</div>

It all works like a dime, but when i hit the screen resolution of “col-md-4” it aligns 3 videos on a line and 1 video below on its own line alone, i’d like to hide 1 of the data pulls at this screen resolution untill the screen resolution reaches col-sm-6 and below, how is this possible with a data loop ? i know how to do it with plain code in many different ways like the easy bootstrap premade class “hidden-md”, but how can i give this code to only one of the data pulls?

I hope this makes sence :smile:

Try this:

http://php.net/manual/en/function.array-splice.php

and if that does not work then try checking for the value not required in the loop and set the array item to NULL

Hi thanks for the reply, im not sure if this is a effective way to solve the problem but here is what i did

<?php
		$db = mysqli_connect('localhost', 'root', '', 'eb_videos');
		$data = mysqli_query($db, 'SELECT * FROM videos ORDER BY id DESC LIMIT 3');
		$datas_video = array();
		while($row = mysqli_fetch_assoc($data)) {
			$video = array();
			$video['id'] = $row['id'];
			$video['title'] = $row['title'];
			$video['link'] = $row['link'];
			$video['views'] = $row['views'];
			$video['likes'] = $row['likes'];
			$datas_video[] = $video;
		}
		mysqli_free_result($data);
	?>
		<?php
		$i = 0;
		foreach ($datas_video as $key => $video) {
			if($i == 3) {
				$i = 0;
			}
						if($i == 0) {
				echo '<div class="col-lg-12 videowrap">';
			}
			?>
            
    <div class="inbo col-sm-6 col-lg-3 col-xs-12 col-md-4">
				<div class="box new" data-id="<?=$video['id']?>" data-views="<?=$video['views']?>" data-likes="<?=$video['likes']?>" data-link="<?=$video['link']?>">
					<img class="imgsis" src="http://img.youtube.com/vi/<?=$video['link']?>/0.jpg" alt="#"/>
                    <img src="img/videos/new.png" alt="Random video">
					<span class="caption simple-caption">
						<div class="col-xs-6">
							<h6 class="viewtext"><?=$video['views']?></h6>
							<img src="View.png" class="viewbox" height="30" width="30">
						</div>
						<div class="likewrap col-xs-6">
							<h6 class="liketext"><?=$video['likes']?></h6>
							<img src="Like.png" class="likebox" height="20" width="20">
					</div>
					</span>
				</div>
				<h4 class="vidtext"><?=$video['title']?></h4>
			</div>
			<?php
			if($i == 2) {
				echo '';
			}
			$i++;
		}
		?>
<?php
		$db = mysqli_connect('localhost', 'root', '', 'eb_videos');
		$data = mysqli_query($db, 'SELECT * FROM videos ORDER BY id DESC LIMIT 3, 1');
		$datas_video = array();
		while($row = mysqli_fetch_assoc($data)) {
			$video = array();
			$video['id'] = $row['id'];
			$video['title'] = $row['title'];
			$video['link'] = $row['link'];
			$video['views'] = $row['views'];
			$video['likes'] = $row['likes'];
			$datas_video[] = $video;
		}
		mysqli_free_result($data);
	?>
		<?php
		$i = 0;
		foreach ($datas_video as $key => $video) {
			if($i == 1) {
				$i = 0;
			}
						if($i == 0) {
				echo '<div class="inbo col-sm-6 col-lg-3 col-xs-12 hidden-md hidden-xs">';
			}
			?>
            
				<div class="box new" data-id="<?=$video['id']?>" data-views="<?=$video['views']?>" data-likes="<?=$video['likes']?>" data-link="<?=$video['link']?>">
					<img class="imgsis" src="http://img.youtube.com/vi/<?=$video['link']?>/0.jpg" alt="#"/>
                    <img src="img/videos/new.png" alt="Random video">
					<span class="caption simple-caption">
						<div class="col-xs-6">
							<h6 class="viewtext"><?=$video['views']?></h6>
							<img src="View.png" class="viewbox" height="30" width="30">
						</div>
						<div class="likewrap col-xs-6">
							<h6 class="liketext"><?=$video['likes']?></h6>
							<img src="Like.png" class="likebox" height="20" width="20">
					</div>
					</span>
				</div>
				<h4 class="vidtext"><?=$video['title']?></h4>
			</div>
			<?php
			if($i == 0) {
				echo '</div>';
			}
			$i++;
		}
		?>

So this is what i did i kinda made two versions of the script one that outputs 3 videos, and one that outputs the final 4th video with the hidden class for md :smile: , im not that good at php, and i will chek your solution later :smile: i highly doubt this is a good solution ?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.