What's the reason for the significant space between the paragraphs?

https://i.sstatic.net/UvPU4.jpg

I am puzzled by the excessive vertical space between Status: and CLOSED. This issue is only visible on smaller screens, as they are displayed side by side on desktops.

Here is the code snippet causing the problem:

<div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm">
                <h1 class="status">Status:</h1>
            </div>
            <div class="col-lg-8 col-md-7 col-sm-6 text-sm-left">
                <span class="closed">closed</span>
            </div>

  </div>

.closed {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 100px;
  color: #2eb82e;
  text-shadow: 2px 2px #29a329;
}
.status {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 100px;
  color: white;
}

If you have any insights or suggestions to resolve this issue, please let me know. Thank you for your help!

EDIT: It seems like the padding issue might be related to one of the col-lg-8 col-md-7 col-sm-6 classes. Upon inspecting the div, I noticed that the .closed and .status elements do not exhibit this extra padding.

htmlcssbootstrap-4

Answer №1

To resolve the issue, you can use the "margin: 0" property since Bootstrap has a default margin for titles.

.closed {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 100px;
  color: #2eb82e;
  text-shadow: 2px 2px #29a329;
  margin: 0;
}
.status {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 100px;
  color: white;
  margin: 0;
}

@media (min-width: 2561px) {
     .container {
         margin-top: 20vh;
     }
     .status {
       font-size: 120px;
     }
     .closed {
       font-size: 120px;
       margin-left: 80px;
     }
   }
/**
 * XL desktops
 * ---------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 2560px){
  .status {
    font-size: 90px;
  }
  .closed {
    font-size: 90px;
  }
  .container {
      margin-top: 18vh;
      margin-left: 20%
  }
}

/**
 * LG laptops
 * ---------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .closed {
    font-size: 80px;
  }
  .status {
    font-size: 80px;
  }
}


/**
 * MD Tablet
 * ---------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .closed {
    font-size: 80px;
    line-height: 1;
  }
  .status {
    font-size: 50px;
  }
}

/**
 * SM biggerphone
 * ---------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767px) {
  .closed {
    font-size: 80px;
    line-height: 1;
  }
  .status {
    font-size: 60px;
  }
}

/**
 * XS Small phone
 * ---------------------------------------------------------------- */
@media (max-width: 575px){

 .status {
   font-size: 50px;
 }
 .closed {
   font-size: 55px;
   line-height: normal;
 }
 .container {
   margin-top: 5vh;
 }
}
<div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm">
                <h1 class="status">Status:</h1>
            </div>
            <div class="col-lg-8 col-md-7 col-sm-6 text-sm-left">
                <span class="closed">closed</span>
            </div>
        </div>
  </div>

Answer №2

@media (max-width: 575px){
 .status {
   font-size: 50px;
   line-height: .8; 
 }
 .closed {
   font-size: 55px;
   line-height: .8;
 }
 .container {
   margin-top: 5vh;
 }
}

It appears that adjusting the line-height can help resolve issues with large text sizes. The example above demonstrates how you can make adjustments for better readability. https://jsfiddle.net/csscoder/xmgskj0w/6/

Answer №3

Is your intention to decrease the vertical distance between the two text elements? The presence of a green box around Status: indicates that there is padding applied to that specific element. To bring the texts closer together, consider adding padding-bottom: 0. Additionally, keep in mind that H1 elements typically include a default margin bottom, which can be adjusted using margin-bottom: 0 to further reduce spacing.

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

CSS - Divs failing to center using 'Auto: 0 Margin'

Attempting to design a menu bar using CSS, where the main buttons (blue divs) need to be centered within the navigation bar (orange divs) with equal spacing between each button. Despite trying margin: 0 auto, the alignment is not working as expected. Bel ...

htmlcssmargincentering

Execute Javascript after modification of the DOM

I have developed two custom directives known as app-content and app-content-item. These directives are intended to be utilized in upcoming projects to provide a basic structure with simple styling. They will be incorporated into a module and should be nest ...

javascripthtmlangularjs

Implementing carousel functionality within cards in a ReactJS application

I'm facing an issue with implementing a carousel in cards. I've tried to set it up, but it's not functioning correctly. Below is the carousel code in my cards file. Please take a look and provide guidance on how to fix it. cards.js The ca ...

reactjsnpmbootstrap-4carousel

Developing an if-else statement to showcase a different div depending on the URL

Having trouble with an if/else statement to display one div or another based on the URL: No matter what I try, only "Div 1" keeps showing. Here's my code snippet: <script> if (window.location.href.indexOf("pink") > -1) { document.getElemen ...

javascripthtmlif-statement

Troubleshooting the pre-loader image loading problem

Apologies for bringing up a minor issue, but I'm struggling with this one. I added a pre-loader image to my page load using a simple method. You can find my page here Here is the HTML code for the Pre-loader image: <div class="se-pre-con">&l ...

javascriptjqueryhtmlcss

The scrollTop functionality is not functioning as expected in AngularJS when using the $timeout directive

In my angularJS project, I'm working on implementing a small chat feature. To ensure that the messages are always visible to users, I need the message display div to automatically scroll down when the page loads. For this purpose, I have created a cus ...

javascripthtmlangularjs

How to Align Resizable Images in Nested Divs Using CSS on Drupal 7

I am currently working on customizing an image gallery in Drupal 7 that I have built. Users can upload multiple images, which are then displayed as a list on the page. To ensure responsiveness, I am using the Responsive Images and Styles module so that th ...

cssdrupal-7css-floatdrupal-theminghtml

Tips for updating the class of a button upon clicking it

I have a dilemma with my two buttons - one is green and the other has no background. I want them to change appearance when clicked, from green to one with a dashed border-bottom style. Below is the HTML code for these buttons: <div class="btns"> ...

javascriptjquerycssbutton

Not every situation calls for the same type of styling

I am struggling to override the CSS for <h1> and <h2> using specific selectors only. The changes are only being applied to one class, with <h1> changing color to green but not <h2>. Can someone please assist me in identifying where ...

css

Capturing and saving detailed hand-drawn artwork in high resolution

Is there a cutting-edge solution available for capturing hand-drawn sketches (from a tablet, touch screen, or iPad-like device) on a website using JavaScript and saving it on the server side? Essentially, I am looking for a mouse drawing canvas with a hig ...

javascriptjqueryhtmltablet-pc

Issue with displaying Bootstrap column accurately

My attempt to create a row with 3 columns is not working as expected. The columns are displaying as rows instead. <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8> &l ...

javascripthtmlbootstrap-4

Calls to the function are piling up

There is a bootstrap modal that displays a confirmation message. If the 'accept' button is clicked, a function is called with an id. If the 'cancel' or 'close' button is clicked, the modal closes. The problem arises when the m ...

javascriptjquerybootstrap-4bootstrap-modal

Conceal the input field in a Vue.js datepicker

In my Vue project, I am utilizing the vuejs-datepicker component. My goal is to hide the default input field and display the Calendar only when the user clicks a button. To achieve this, I have placed the <datepicker/> within a div and applied CSS to ...

cssvue.jsdatepicker

What is the best way to eliminate a vertical scroll on a webpage

Struggling to achieve a responsive layout with a dynamic background image, but still dealing with unwanted scrolling. I've experimented with overflow:hidden and different background properties without success. <div class="wrap"> <div cla ...

htmlcssresponsive-designflexbox

Is it considered standard practice in Bootstrap 4 to consistently utilize rows?

Hey there, I need help settling a debate with another developer and I'm turning to the online community for advice. I have a question about Bootstrap 4 - is it considered best practice to always wrap content in a container within a row and column str ...

bootstrap-4

Is it feasible to switch the classList of a form element that also has an event listener attached to it?

While I don't have a specific code snippet to share, I did have an idea and attempted to implement it. Unfortunately, it didn't yield the desired results. const validateEmailAddress = function (e) { const regex = /^[a-zA-Z0-9.!#$%&&apos ...

javascripthtmlcssformsdom

Executing a .sh script upon loading a webpage

Is there a way to automatically run a .sh file on webpage load to fetch a JSON file using cURL, without making it visible? I need to keep the API key confidential. ...

htmldebian

Folded Sidebar

Is there a way to create a collapsed sidebar without the main div moving to the right after opening it? I want the division to resize to fit the screen size instead. Here is an example of what I am looking for: https://www.w3schools.com/howto/tryit.asp?fil ...

cssbootstrap-4sidebar

Merging Fewer with Visual Studio 2012

Combining all Less files into a single stylesheet? After following the instructions in the above link, I have successfully merged my Less files together for easier CSS reading during development. However, I would like to ensure that end users only need to ...

cssvisual-studio-2012lessweb-essentials

Difficulty arises when trying to engage with the addition span within a span using jQuery

Looking for some assistance here! Currently in the process of developing a mail system and focusing on creating a list of receivers. I am working on adding user names to a span element, with the goal of being able to remove users by clicking their name. & ...

jqueryclickhtml