Skip to main content

Unwanted white space when I go into mobile view

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 class="row no-gutters">
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za miran život bez stresa!</h2>
    <br>
    <p class="mb-0 text-white-50">321 GARAŽNO MESTO</p>
    <p class="mb-0 text-white-50">+ priključci za električni automobil, auto-perionica u garaži.</p>
  </div>
  <div class="col-6">
    <img src="assets/img/slikablok2.jpg" class="img-fluid">
  </div>
</div>

<div class="row no-gutters">
  <div class="col-6">
    <img src="assets/img/slikablok3.jpg" class="img-fluid">
  </div>
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="text-white"> SPOJITE SE SA PRIRODOM! </h2>
    <br>
    <p class="mb-0 text-white">Naša inspiracija – Gorica, simbol je magičnog lijepog parka koji se prostire 
    parkom površine od čak 1,4 hektara.</p>
    <p class="mb-0 text-white">Njime poručujemo da se spojite sa prirodom, procvetate i napredujete.</p>
  </div>
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za sve vremenske prilike i potpuno uživanje.</h2>
    <br>
    <p class="mb-0 text-white-50">GRIJANJE I HLAĐENJE</p>
    <p class="mb-0 text-white-50">U stambenom dijlu objekta primenjen je sistem grijanja i hlađenja svih prostorija, najsavremenijom tehnologijom.</p>
  </div>
  <div class="col-6">
    <img src="assets/img/slikablok4.jpg" class="img-fluid">
  </div>
</div>
by the nr in StackOverflow on July 02, 2022.
Answer

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/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row no-gutters">
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za miran život bez stresa!</h2>
    <br>
    <p class="mb-0 text-white-50">321 GARAŽNO MESTO</p>
    <p class="mb-0 text-white-50">+ priključci za električni automobil, auto-perionica u garaži.</p>
  </div>
  <div class="col-6">
    <img src="https://picsum.photos/200/300?random=1" class="w-100 h-100">
  </div>
</div>

<div class="row no-gutters">
  <div class="col-6">
    <img src="https://picsum.photos/200/300?random=2"  class="w-100 h-100">
  </div>
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="text-white"> SPOJITE SE SA PRIRODOM! </h2>
    <br>
    <p class="mb-0 text-white">Naša inspiracija – Gorica, simbol je magičnog lijepog parka koji se prostire parkom površine od čak 1,4 hektara.</p>
    <p class="mb-0 text-white">Njime poručujemo da se spojite sa prirodom, procvetate i napredujete.</p>
  </div>
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za sve vremenske prilike i potpuno uživanje.</h2>
    <br>
    <p class="mb-0 text-white-50">GRIJANJE I HLAĐENJE</p>
    <p class="mb-0 text-white-50">U stambenom dijlu objekta primenjen je sistem grijanja i hlađenja svih prostorija, najsavremenijom tehnologijom.</p>
  </div>
  <div class="col-6">
   <img src="https://picsum.photos/200/300?random=3"  class="w-100 h-100">
  </div>
</div>

by dippas on July 02, 2022.

Comments

Post a Comment