Excessive empty space appears on my mobile screen

Is there a solution to remove the white space issue that only occurs in mobile view? Here is an image of the problem: Untitled:
https://i.sstatic.net/6WcGy.png

I attempted using responsive instead of fluid, but it only resulted in the image being scaled up.

This is the HTML code for 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>
htmlcssimagebootstrap-4

Answer №1

Update your class from img-fluid to w-100 h-100 and add object-fit: cover in your CSS

img {
  object-fit: cover
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36545959424542445746760218001807">[email protected]</a>/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">For a peaceful life without stress!</h2>
    <br>
    <p class="mb-0 text-white-50">321 PARKING SPOT</p>
    <p class="mb-0 text-white-50">+ electric car connections, car wash in the garage.</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">CONNECT WITH NATURE!</h2>
    <br>
    <p class="mb-0 text-white">Our inspiration - Gorica, symbol of a magical beautiful park that extends over an area of ​​1.4 hectares.</p>
    <p class="mb-0 text-white">We encourage you to connect with nature, blossom and thrive.</p>
  </div>
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">For all weather conditions and complete enjoyment.</h2>
    <br>
    <p class="mb-0 text-white-50">HEATING AND COOLING</p>
    <p class="mb-0 text-white-50">The residential part of the building is equipped with a heating and cooling system for all rooms, using the latest technology.</p>
  </div>
  <div class="col-6">
   <img src="https://picsum.photos/200/300?random=3"  class="w-100 h-100">
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Embed the YouTube video using the URL in the video tag

I tried using the <video> tag, but I'm having trouble getting it to play videos from YouTube. Even though I found this http://jsfiddle.net/wCrNw/, it doesn't seem to work as expected. I also consulted Show Youtube video source into HTML5 ...

htmlvideoyoutube

Insert the current row into the table

I'm working with an HTML table structure that looks like this: <table id="test"> <thead> <tr> <td></td> <td></td> <td></td> <td></td> ...

jqueryhtml

What is the best way to horizontally align text in a container without it remaining at the top?

My attempts to center the button using vertical-align: middle and text-align: center have been unsuccessful, as the styling does not affect the button's position and it remains at the top. I am puzzled by why the style is not being applied. While I c ...

htmlcsspositiontransform

What is the process for activating angular.js animation code within your JavaScript file?

Upon reaching the app.controller section, a console.log statement is executed in the Fourth line of angular.js code, displaying output in the console. Why is the animation code not working as expected? Does the ng-repeat directive support repeating element ...

javascripthtmlangularjsanimation

Save web pages and images using Puppeteer

I'm currently working on saving a webpage for offline use using Nodejs and puppeteer. While many examples show using: await page.screenshot({path: 'example.png'}); This method doesn't work well for larger webpages. A more effective ap ...

javascriptnode.jshtmlweb-scrapingpuppeteer

"Using hashtags in your Pinterest sharing description is a clever way to

Hi there, I've been working on setting up social sharing with Pinterest on my website. Everything seems to be functioning correctly, except for one issue - the hashtags aren't showing up as they should. To illustrate the problem, I created a JSF ...

htmlpinterest

I need to implement a div-based dropdown with a scrollbar in JavaScript and CSS to prevent it from extending beyond the screen. Additionally, the use of struts is essential in this implementation

Dealing with a dynamically populated div-based dropdown can be tricky, especially when it extends beyond the screen's limits and hides entries. This is an inherited application that lacks support, leaving me to handle it without the necessary expertis ...

javascriptjqueryhtmlcss

Deselect a checkbox that is already selected and choose the current option in the multiselect dropdown

I've created a code that allows for single select in a multiselect dropdown, disabling other options once one is chosen. However, I don't want to disable the checkboxes and would like to uncheck the selected option if a new one is chosen, all whi ...

javascriptjquerybootstrap-4drop-down-menumulti-select

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

javascriptjqueryhtmlcss

Unrestricted heading for a spreadsheet

My goal is to create a table with a leftmost header column that has no border, but is still part of the table. In my attempt to achieve this, I used the following HTML code: <table class="my-table" style="border-left: 0"> <tr> < ...

htmlcss

dirpagination fails to display all rows in the dataset

I've been working on creating tables with 3 divs, as shown in the link below:- https://github.com/anirbanmishra/congress.php/blob/master/web_test Additionally, I have a javascript file available here:- https://github.com/anirbanmishra/congress.php/bl ...

javascripthtmlangularjsangularjs-ng-repeatdirpagination

Differences in font sizes across various browsers on Mac devices

In the given scenario, a navigation bar is displayed. The elements of this navigation bar have varying widths, but when combined together, their total width matches that of their container element, which is the ul. The problem arises when viewing the navig ...

htmlcssmacosfonts

JQuery Validity Customization

I recently came across tutorials demonstrating how to set custom errors for a form's input fields using JavaScript. One example is shown below: document.getElementById('fname').setCustomValidity('Invalid'); However, when I atte ...

javascriptjqueryhtml

Employ PHP to adjust the size of an image with the help of $_GET.REQUEST

Is there a way to resize an image on mouse hover using PHP with $_GET instead of CSS or JavaScript? I am looking for a method to achieve this without the need to upload a file. For example, if I have HTML code with an <img> tag and an image, how can ...

phphtml

Adjusting the width of the header in Wordpress themes like Genesis and Foodie Pro

Struggling with the header appearance on my website. I want the blue section to be full width while keeping the logo and navigation the same width as the content area (1040px). I'm new to Wordpress and unsure how to make this adjustment. Someone sugg ...

csswordpress

How can I prevent or override the text being pushed to the right by CSS::before?

Using the css property ::before, I am attempting to insert a tag before a paragraph. While I am able to display the tag correctly, it is causing the text within the paragraph to be shifted to the right. Ideally, I would like the tag to appear in the top-le ...

css

What are some alternatives to tables for displaying two lines of headings and corresponding data?

Here is a snippet of HTML code I am working with: <div><span class='top'>Answered</span></div><div id="hour">15</div> <div><span class='top'>Not Answered</span></div ...

htmlcss

Designing HTML columns to adapt to different screen resolutions

Looking for a clever jQuery or CSS trick to dynamically adjust the number of columns in a website layout based on the size of the viewport. For instance, an iPhone display would have 1 column, while an 800x600 screen would have 2, and a 1024x768 screen wou ...

jqueryhtmlcss

CSS page rule option for optimal display in Safari

What is the workaround for using alternative rules in Safari? I am currently implementing the angularPrint directive to enable print functionality on certain pages. This directive includes some helper classes in my document and utilizes the @page direct ...

htmlcssprintingsafarimedia-queries

Turn off the special treatment of the "class" attribute

The Background: When using BeautifulSoup to parse HTML, the attribute class is considered a multi-valued attribute and is treated differently: It's important to remember that a single tag can have multiple values for its "class" attribute. When se ...

pythonhtmlbeautifulsouphtml-parsing