Home > front end >  Unwanted white space when I go into mobile view
Unwanted white space when I go into mobile view

Time:07-03

Does someone know how to remove this white space? This only occurs when I'm in mobile view. Image of the problem. Untitled:
Untitled

I tried using responsive instead of fluid but that doesn't solve the problem completely, the image is just scaled up.

HTML code of these boxes

<div >
  <div >
    <h2 >Za miran život bez stresa!</h2>
    <br>
    <p >321 GARAŽNO MESTO</p>
    <p >  priključci za električni automobil, auto-perionica u garaži.</p>
  </div>
  <div >
    <img src="assets/img/slikablok2.jpg" >
  </div>
</div>

<div >
  <div >
    <img src="assets/img/slikablok3.jpg" >
  </div>
  <div >
    <h2 > SPOJITE SE SA PRIRODOM! </h2>
    <br>
    <p >Naša inspiracija – Gorica, simbol je magičnog lijepog parka koji se prostire 
    parkom površine od čak 1,4 hektara.</p>
    <p >Njime poručujemo da se spojite sa prirodom, procvetate i napredujete.</p>
  </div>
  <div >
    <h2 >Za sve vremenske prilike i potpuno uživanje.</h2>
    <br>
    <p >GRIJANJE I HLAĐENJE</p>
    <p >U stambenom dijlu objekta primenjen je sistem grijanja i hlađenja svih prostorija, najsavremenijom tehnologijom.</p>
  </div>
  <div >
    <img src="assets/img/slikablok4.jpg" >
  </div>
</div>

CodePudding user response:

replace your class img-fluid for w-100 h-100 and object-fit: cover in css

img {
  object-fit: cover
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
    <h2 >Za miran život bez stresa!</h2>
    <br>
    <p >321 GARAŽNO MESTO</p>
    <p >  priključci za električni automobil, auto-perionica u garaži.</p>
  </div>
  <div >
    <img src="https://picsum.photos/200/300?random=1" >
  </div>
</div>

<div >
  <div >
    <img src="https://picsum.photos/200/300?random=2"  >
  </div>
  <div >
    <h2 > SPOJITE SE SA PRIRODOM! </h2>
    <br>
    <p >Naša inspiracija – Gorica, simbol je magičnog lijepog parka koji se prostire parkom površine od čak 1,4 hektara.</p>
    <p >Njime poručujemo da se spojite sa prirodom, procvetate i napredujete.</p>
  </div>
  <div >
    <h2 >Za sve vremenske prilike i potpuno uživanje.</h2>
    <br>
    <p >GRIJANJE I HLAĐENJE</p>
    <p >U stambenom dijlu objekta primenjen je sistem grijanja i hlađenja svih prostorija, najsavremenijom tehnologijom.</p>
  </div>
  <div >
   <img src="https://picsum.photos/200/300?random=3"  >
  </div>
</div>

  • Related