CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dev pokhariya
Dev pokhariya

Reputation: 336

Making image and text responsive

I want my image and text to be responsive, I have added image for the format I need, but I used some coding and I'm not able to do it the right way. Please can someone help me out here?

I have this format here for desktop version display in desktop version

and this is what I see in tablet for screen 768 image for tablet

now I want in tablet to be similar as in desktop image I want for tablet

@media (min-width:641px) {
.home-top{
  background: url(../../images/index/u155.png);
  background-position: center;
  background-repeat: no-repeat;
  min-height: 280px;
  color:#fff;
  padding-top: 30px; 
  padding-bottom: 30px; 
    }
  }
<div class="home-top ">
    <div class="container">
        <div class="lg-container">
            <div class="lg-container">
                <div class="row">
                    <div class="col-md-4 "><img src="<?php echo URL ?>public/images/image_directeur.png" class="director-img"></div>
                      <div class="col-md-8 ">Mot de l’Inspecteur Général en charge de l'IGF <br><br>Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur général Mr Salomon Jude Alix Patrick...  Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur Général Mr Guy Romero LATRY...
                        <br><br>
                        Guy Romero LATRY <span style="float: right;"><button class="home-top-btn">Lire l'article >></button></span>

                    </div>

                </div>
            </div>
        </div>
    </div>

</div>

Upvotes: 1

Views: 54

Answers (1)

Gezzasa
Gezzasa

Reputation: 1453

The col-md-* works for screen widths higher than 992px.

You should add `col-sm-4' to the first column div and 'col-sm-8' to the second. Add, not replace.

This should work to get the proportions right on smaller screens.

Upvotes: 1

Related Questions