I'm having trouble making my image and text responsive. I have the desired format for desktop, but it's not translating correctly to tablet. Can someone assist me with this?
This is the layout for the desktop version: https://i.sstatic.net/FzStm.png
And this is how it appears on a tablet screen size of 768 pixels: https://i.sstatic.net/Qg3fl.png
My goal is to make the tablet view resemble the desktop layout: https://i.sstatic.net/GVOwt.png
@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>