CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dev pokhariya
Dev pokhariya

Reputation: 336

image responsive in loop

The problem i am facing is simple i have created a div with image and text and that image and text is in loop. so for desktop it is right but for tablet i need the image should come side by side but instead it is coming below one another. this is image in tablet i m gettingthe image i am getting

this image is what i need this is the image i need in tablet view

                <?php for ($i = 0; $i < 3; $i++) { ?>
                    
                    <div class="row padding-1">
                        <div class="col-lg-4  col-sm-3">
                            <img src="<?php echo URL ?>public/images/group.jpg" class="group-pic">
                        </div>
                        <div class="col-lg-8  col-sm-4">
						<span class="right-news" style="">VALIDATION DE QUATRE (4) GUIDES POUR LA CONDUITE DES MISSIONS DE L’IGF<span></div>

                    </div>
                <?php } ?>

I need some help here.

Upvotes: 1

Views: 252

Answers (2)

Nadun Kulatunge
Nadun Kulatunge

Reputation: 1731

Try setting the column size for sm smaller screens(tablets) also the same as for lg larger screens(desktops) And you have put the loop with the row class. Change your code as follows,

<div class="row padding-1">
<?php for ($i = 0; $i < 3; $i++) {?>

 <div class="col-lg-4 col-sm-4">
  <img src="<?php echo URL ?>public/images/group.jpg" class="group-pic">
 </div> 
 <div class="col-lg-8 col-sm-8">                         
 <span class="right-news" style="">VALIDATION DE QUATRE (4) GUIDES POUR LA CONDUITE DES MISSIONS DE L’IGF<span>
 </div> 

<?php } ?>
</div>

Upvotes: 1

Red
Red

Reputation: 7299

Your loop is outside a .row class. So a new .row is created each time. Instead wrap your loop around a boostrap .col-*. Where the * must be the size you want the col to be.

Example:

<div class="row">

    <?php for ($i = 0; $i < 3; $i++) { ?>

    <div class="col-md-3 col-sm-4 col-xs-6">
        <div class="row padding-1">
            <div class="col-lg-4  col-sm-3">
                <img src="<?php echo URL ?>public/images/group.jpg" class="group-pic">
            </div>
            <div class="col-lg-8  col-sm-4">
                <span class="right-news" style="">VALIDATION DE QUATRE (4) GUIDES POUR LA CONDUITE DES MISSIONS DE L’IGF<span>
            </div>
        </div>
    </div>

    <?php } ?>

</div>

Upvotes: 1

Related Questions