What is the best way to eliminate excessive spacing between two containers in mobile view?

I have created a layout with a single container and a row split into two columns. The left column contains a title and the right column contains a card, both centered. I am facing an issue when viewing it on mobile, there is excessive spacing between the title and the card. I would appreciate any suggestions on how to fix this. Thank you!

body,html {
  height: 150%;
  background-color:#F0F8FF;
}
.card {
  border: none;
  width: 500px;
  height: 625px;
  background-color: #F0F8FF;
  border: 5px solid #81D8D0;
  margin: auto;
}

.exampleTitle{
  width: 400px;
  color: #81D8D0;
  font-size: 4rem;
  border: 5px solid #81D8D0;
  box-shadow: 5px 4px 20px #81D8D0;
  margin: auto;
  }
<!DOCTYPE html>
<html <head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid h-100">
    <div class="row h-100">
      <div class="col-xl-6  align-self-center">
        <div class="exampleTitle text-center rounded">
          Title
        </div>
      </div>
      <div class="col-xl-6  align-self-center">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c1dec1c1d4c39fdbc2f1809f80879f81">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

javascripthtmlcss

Answer №1

To solve the issue, I suggest removing the line height: 150%; from the CSS declaration for html, body. By doing this, the height will be automatically set, potentially resolving the problem you are facing.

Answer №2

Here is a solution that eliminates the need for extra CSS.

When the screen width is xl, the first column (containing a title) will be displayed while another title will be hidden.

On screens smaller than xl, the first column will be hidden and the second title will be displayed instead.

<div class="container-fluid h-100">
    <div class="row h-100">
      <div class="col-xl-6 align-self-center d-none d-xl-block">
        <div class="exampleTitle text-center rounded">
          Title
        </div>
      </div>
      <div class="col-xl-6 align-self-center">
        <div class="d-block d-xl-none">
            <div class="exampleTitle text-center rounded">
              Title
            </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
          </div>
        </div>
      </div>
    </div>
</div>

Answer №3

The reason for this issue is due to the use of fixed "height: 150%" in the body HTML.

One possible solution is to utilize @media alongside "min-height: 150%" in the HTML.

@media screen and (min-width: 1200px) {
    html, body {
    min-height: 150%; }
}

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

Vue form component triggers the submit event twice

In my current project, I am utilizing the most recent version of Vue 3 without any additional vendors. After experiencing a setback in which I invested several hours attempting to uncover why my form component was triggering the submit event twice, I am le ...

javascriptformsvue.jsvuejs3

Storing a string in localStorage versus $localStorage in Angular 1 yields distinct value differences

I have encountered an issue in my angular controller where I am trying to save a token returned from an API endpoint as a string. In this example, I have used the variable testData instead of the actual token. var testData = "testdata" $localStorage[&apo ...

javascriptangularjsng-storage

What is the best way to conceal a portion of a child element that exceeds the size of its parent container?

My <div> contains a <p>, but sometimes the text in the <p> exceeds the boundaries of the div. <div style="width: 100px'; height='100px';"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ...

htmlcss

What are the disadvantages associated with the different methods of submitting data?

My goal is to create an Online testing platform. I have come across two different approaches to verify user-selected answers. Approach 1 <div class="qContainer" index="0"> Who holds the record for scoring 100 centuries in International cricke ...

javascriptphphtmlajaxforms

Center align the image without any additional spaces

https://i.sstatic.net/Oxmqa.pngI'm looking to center align the logo within the navigation bar on my page. Here is the code I currently have: <div class="nav"> <ul> <li id="center"> <a href="home.php">&l ...

htmlcss

unable to locate the font file I recently downloaded in the Windows terminal

Interested in customizing your Windows terminal? I recently decided to change my font style and downloaded the desired one. However, despite seeing the font in control panel and trying the "downloading for every user" option, my terminal still can't l ...

javascriptterminalfonts

CKEditor4 plugins do not function properly when used with multiple instances within Vue Components

After developing a Vue component for rich text editing with CKEditor 4 on my website, I encountered an issue. When the component is first mounted, everything works perfectly including all default plugins. However, if another instance of the same component ...

javascriptvue.jsckeditorckeditor4.x

Issue encountered with ngRoute dependency injection, despite successful loading of angular-route.js.min file

I'm struggling to understand why the module isn't loading properly with ngRoute. Even though I have included angular and angular-route scripts from a CDN, I keep encountering the error Error: $injector:modulerr Module Error <!--Angular--&g ...

javascriptangularjs

Creating a Yup field that is an object and making it required when another field is set to true in the validation process

Just getting started with Yup validation and I'm facing an issue. I am attempting to make certain fields required based on a condition. Specifically, I want the digital object to be required only if hasDigital is true; otherwise, it should be optional ...

javascriptformsvalidationyup

Words not within the span, away from the span border

I’m currently in the process of creating a dedicated section on my website called "Voices of the Nation,” which draws inspiration from the foundations laid out in the U.S. Constitution. The objective is to highlight individuals who have shown their sup ...

htmlcsslayoutfonts

Issue Arising from Printing a Custom Instruction in a Schema Generated Document

When dynamically adding a directive, the directive is correctly generated in the output schema. However, it seems to be missing when applied to specific fields. Here is how the directive was created: const limitDirective = new graphql.GraphQLDirective({ na ...

javascripttypescriptgraphqlgraphql-jsgraphql-tools

The Art of Capturing Sound: Unleashing

Currently, I am attempting to capture video via html5 .getUserMedia and play it back without needing to upload it to a server. Despite following numerous tutorials, I have only been successful on Chrome by utilizing canvas to draw the webp image and then c ...

javascripthtmlvideo-recording

Utilizing Bootstrap for Efficient Image Alignment

I'm encountering an issue with my code and I am unsure of how to fix it. The current state of my code is different from the desired outcome https://i.sstatic.net/Ti1kK.jpg As you can see, the image above does not match the appearance of the image I ...

htmlcsstwittertwitter-bootstrap-3

Retrieve Content from a Different Web Page Using Ajax

I recently received permission from another website to pull their RSS feeds, and now I'm trying to figure out what to write in TAG1 and TAG2. This is the specific issue I'm facing: Here is the HTML code (it's an ajaxed page) <!doctype ht ...

javascriptajax

Sending a form using AJAX causes the page to redirect

I have an input type="file" that triggers a form submission upon change. $(document).on("change", "#image-upload", function (e) { $.ajax({ url: '/BlogPost/UploadHomeReport', type: 'POST', data: $('#upload-i ...

javascriptjqueryjsonajax

Discover the best way to retrieve attribute values using jQuery

I'm struggling to retrieve the value of the attribute "_last_val" from my input, but I'm having trouble getting it. Here is what I have attempted: demo // Here is the HTML code <form method="post" action="" id="feedback_form"> <inpu ...

javascriptphpjqueryajaxalert

Tips for targeting an element for focus following a re-render in ReactJS

Within my web application, when a user hits the enter key, they are able to save the current record. A message confirming that the "record has been successfully saved" is then displayed. However, I have noticed that the blinking cursor in one of the input ...

javascriptreactjsuser-interfaceautofocus

Issue in Wordpress: ReferenceError - '$' is not defined

Currently utilizing WordPress and attempting to access the following code snippet. I am encountering an error on the last line }(jQuery)); (function($) { $(function () { // Slideshow 3 $("#slider3").responsiveSlides({ auto: true, pag ...

javascriptjquerywordpress

What is the best way to create an index for a user-provided value in a textbox

Looking for guidance on how to set an index to user-provided values in a textbox, append them to a table in a new row, and display that index in the first column of every row. I am unfamiliar with this type of functionality. $(document).ready(function() ...

javascriptjqueryhtmlcss

The Vue component does not render the JS Promise and instead displays it as

After setting up a promise that will be returned once a correct event is called with the correct action, I have the following code: import {EventBus} from "./EventBus"; export function completed() { EventBus.$on('queue-action', e => { ...

javascriptvue.jspromisees6-promise