Issue
Does someone know how to remove this white space?
This only occurs when I'm in mobile view.
Image of the problem. 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>
Solution
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>
Answered By - dippas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.