Adding Spacing in Bootstrap 4 for Rows at 768px Width

Trying to decrease the padding between rows because a persistent gap has appeared that just won't go away.

Also noticing gaps between h1 and span elements.

I attempted to use CSS with @media (max-width: 768px) to eliminate these issues, but unfortunately, it did not work.

Below is the code snippet:

.row.row-container {
  padding-top: 30px;
}

.octicon.octicon-check {
  font-size: 38px;
  padding-left: 22px;
}

.box h3 {
  font-size: 16px;
}

.box span {
  font-size: 13px;
}

@media (max-width: 768px) {
  .row.row-container {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
  }
  .octicon.octicon-check {
    font-size: 38px;
    padding-top: 22px;
  }
}
<div class="container">
  <div class="row row-container mt-4 ">
    <div class="col-md-1 col-sm-2 pt-2   sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0  box">
      <h3>Piaskowanie</h3>
      <span>Szybki i bezbolesny zabieg polegający na usunięciu osadu kamienia nazębnego
                    za pomocą strumienia wody pod ciśnieniem.
                </span>
    </div>

    <div class="col-md-1 col-sm-2 pt-2    sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0 box">
      <h3>Endodencja</h3>
      <span>Bezbolesne leczenie chorej tkanki zęba, z użyciem nowoczesnego mikroskopu i endometru.</span>
    </div>
    <div class="col-md-1 col-sm-2 pt-2   sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0 box">
      <h3>Wypełnianie zębów</h3>
      <span>Wypełnienie ubytku materiałem plastycznym, lub wypełnienie ubytku pracami protetycznym.</span>
    </div>
  </div>
  <div class="row row-container mt-4 ">
    <div class="col-md-1 col-sm-2 pt-2   sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0 box">
      <h3>Piaskowanie</h3>
      <span>Szybki i bezbolesny zabieg polegający na usunięciu osadu kamienia nazębnego
                    za pomocą strumienia wody pod ciśnieniem.</span>
    </div>

    <div class="col-md-1 col-sm-2 pt-2   sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0 box">
      <h3>Endodencja</h3>
      <span>Bezbolesne leczenie chorej tkanki zęba, z użyciem nowoczesnego mikroskopu i endometru.</span>
    </div>
    <div class="col-md-1 col-sm-2 pt-2   sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0 box">
      <h3>Wypełnianie zębów</h3>
      <span>Wypełnienie ubytku materiałem plastycznym, lub wypełnienie ubytku pracami protetycznym.</span>
    </div>
  </div>
</div

htmlcssbootstrap-4

Answer №1

<div class="container">
        <div class="row row-container mt-4 ">

            <div class="col-md-3 col-sm-10 p-0  box">
                <h3 id= "test">Piaskowanie</h3>
                <span>Quick and painless treatment involving the removal of dental plaque using a high-pressure water stream.</span>
            </div>

            <div class="col-md-3 col-sm-10 p-0 box" >
                <h3 id= "test">Endodontics</h3>
                <span>Painless treatment of infected tooth tissue using a modern microscope and apex locator.</span>
            </div>

            <div class="col-md-3 col-sm-10 p-0 box">
                <h3 id= "test">Tooth Fillings</h3>
                <span>Filling cavities with plastic material, or using prosthetic fillings to restore tooth structure.</span>
            </div>
        </div>
        <div class="row row-container mt-4 ">

            <div class="col-md-3 col-sm-10 p-0 box">
                <h3 id= "test">Piaskowanie</h3>
                <span>Quick and painless treatment involving the removal of dental plaque using a high-pressure water stream.</span>
            </div>


            <div class="col-md-3 col-sm-10 p-0 box">
                <h3 id= "test">Endodontics</h3>
                <span>Painless treatment of infected tooth tissue using a modern microscope and apex locator.</span>
            </div>

            <div class="col-md-3 col-sm-10 p-0 box">
                <h3 id= "test">Tooth Fillings</h3>
                <span>Filling cavities with plastic material, or using prosthetic fillings to restore tooth structure.</span>
            </div>
        </div>
    </div>

By utilizing the above CSS code in conjunction with this HTML, I have identified that the octavia-related divs were causing those gaps - therefore, I removed them and made minor adjustments to enhance the overall appearance. Feel free to review and validate.

Answer №2

After examining the code, it appears that the .octicon class is responsible for creating the additional spacing between rows due to the padding-top in the .row .row-container.

By deleting the padding-left property from the .octicon class, you can effectively reduce the extra gap between rows.

.octicon.octicon-check{
  font-size: 38px;
  /*padding-left: 22px;*/
 }

Answer №3

.row.row-container {}

.octicon.octicon-check {
  font-size: 38px;
  padding-left: 22px;
}

.box h3 {
  font-size: 16px;
}

.box span {
  font-size: 13px;
}

@media (max-width: 768px) {
  .row.row-container {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
  }
  .octicon.octicon-check {
    font-size: 38px;
    padding-top: 22px;
  }
}

#test {
  margin: auto;
  margin-top: 5px;
}
<div class="container">
  <div class="row row-container mt-4 ">

    <div class="col-md-3 col-sm-10 p-0  box">
      <h3 id="test">Piaskowanie</h3>
      <span>Szybki i bezbolesny zabieg polegający na usunięciu osadu kamienia nazębnego
                    za pomocą strumienia wody pod ciśnieniem.
                </span>
    </div>

    <div class="col-md-3 col-sm-10 p-0 box">
      <h3 id="test">Endodencja</h3>
      <span>Bezbolesne leczenie chorej tkanki zęba, z użyciem nowoczesnego mikroskopu i endometru.</span>
    </div>

    <div class="col-md-3 col-sm-10 p-0 box">
      <h3 id="test">Wypełnianie zębów</h3>
      <span>Wypełnienie ubytku materiałem plastycznym, lub wypełnienie ubytku pracami protetycznym.</span>
    </div>
  </div>
  <div class="row row-container mt-4 ">

    <div class="col-md-3 col-sm-10 p-0 box">
      <h3 id="test">Piaskowanie</h3>
      <span>Szybki i bezbolesny zabieg polegający na usunięciu osadu kamienia nazębnego
                    za pomocą strumienia wody pod ciśnieniem.</span>
    </div>


    <div class="col-md-3 col-sm-10 p-0 box">
      <h3 id="test">Endodencja</h3>
      <span>Bezbolesne leczenie chorej tkanki zęba, z użyciem nowoczesnego mikroskopu i endometru.</span>
    </div>

    <div class="col-md-3 col-sm-10 p-0 box">
      <h3 id="test">Wypełnianie zębów</h3>
      <span>Wypełnienie ubytku materiałem plastycznym, lub wypełnienie ubytku pracami protetycznym.</span>
    </div>
  </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

Slide containing Ionic list views

In my Ionic app, I am using ion-slide-box with 3 slides. Each slide contains an ion-list (table view) with varying numbers of items. The issue is that when scrolling through the shorter list items, it shows empty content due to the taller sibling list taki ...

javascriptcsslistscrollionic-framework

Identifying when the Facebook like feature has finished loading

I am trying to use jQuery to detect when the Facebook like button has loaded, and then fade in the button. My current approach is as follows: $(document).ready(function() { $(document).on( "load", ".fb-like iframe", function() { condole.log("l ...

jquerycssfacebookbuttonfacebook-like

The bootstrap function for showing the modal with the ID "myModal" is malfunctioning

As someone who is just getting started with PHP and Bootstrap, I am running into an issue where the modal doesn't seem to work when triggered using the .modal method. Here is the PHP code I am using: if ($show_login_modal) { echo " <scr ...

javascriptphpbootstrap-4bootstrap-modal

Having trouble getting jQuery css() function to work properly?

<a href="https://www.timeatthebar.co.uk" target="_blank"><img id="icon-img" src="assets/img/tabicon2.png" class="position-absolute top-50 start-50 translate-middle" style="max-width:113px; top ...

javascripthtmljquerycssonclick

Guide to creating scroll-based animations for a Div element

I've been brainstorming ways to rotate a div as I scroll. My goal is to recreate the effect shown in this codepen. However, I'm struggling to implement scrolling functionality. What I envision is scrolling down causing the word Data to rotate in ...

javascripthtmlcss

Issue with IE causing div tags to not expand, functioning properly in other browsers

Desperately seeking some assistance with a frustrating issue I've encountered today. I have a series of divs, and in Chrome, IE, and Safari, when multiple rows are added, the outer div (.formRow) adjusts its height to accommodate the expanded content ...

htmlcssinternet-explorer

Using a for loop to iterate through <p> tags with jQuery

My jQuery loop is not working as expected. When my query returns more than one row, I want to display all outputs in separate p tags. However, the current code only shows the last row in the query results. How can I fix this and display all rows within & ...

javascriptjqueryhtmlajaxloops

The jQuery .on('click') event is only functioning properly the first time it is clicked

Recently, I encountered a peculiar issue with an on-click event that seems to work only once. The intended functionality is to toggle the .p-active class, but instead, it only adds it. The problem arises from dynamically added content post-click using lig ...

javascripthtmljquerycss

Error encountered when compiling LESS files

As a beginner in LESS, I am facing a situation where I have a less file and I am utilizing PHP to pass variables to the LESS file for compilation. The less file contains numerous variables, and each time I pass values via PHP, they may differ. There are in ...

phpcssless

I require a breakdown of the JavaScript code, please

Are you struggling with a code snippet that involves CSS, JavaScript, and HTML? Let's take a look at the complete code: <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/bo ...

javascriptjqueryhtmlcss

Opacity of background color only applies to the color

So, here's the scenario - I currently have a background that looks like this: background:url(../img/arrow_lch.png) right no-repeat #2e443a; The challenge I'm facing is how to decrease the opacity of only the background color (#2e443a). Any sugg ...

csscolorsopacity

What could be causing the gap between the top row and the navbar when using Bootstrap 4?

I'm struggling to identify the source of a space or gap in my header section called #contact-stripe that separates it from the navbar. Despite checking for padding or margin settings, I couldn't pinpoint the issue. For better visibility, I' ...

csstwitter-bootstrapbootstrap-4

Tips for obtaining JSON data within jQuery's sortable feature

Here is the structure of my code : HTML Code : <form action="example3_action.php" name="example3" method="POST"> <input type="hidden" id='serialize_output' name="serialize_output"> <div class='span4'> ...

javascriptjqueryhtmljsonjquery-ui-sortable

Looking to add some movement to your website? Learn how to make an image track your mouse pointer in a specific section of your webpage

I'm just starting out with web design and javascript, so please be patient. My goal is to have an image follow the mouse pointer only when it's within a specific section of my website. I've managed to make the image track the mouse cursor ...

javascriptjqueryhtmlimagemouseevent

Creating a stunning 3D panorama using Three.js and CSS3D is easier than you think, and

After successfully achieving my goal using WebGL, I am now attempting to create a CSS3D fallback. However, the method used in WebGL won't work as CSS3D cannot handle meshes. Is there a way to render a panorama in CSS3D using a single panoramic image ...

javascriptcssthree.jspanoramas

How to shift a bootstrap-4 button to the right without disrupting the layout

Recently, I delved into learning bootstrap-4 and developed a basic social media website utilizing it. However, I encountered an issue while attempting to align my create-post, login, and register buttons to the right using "float-right" as it caused some f ...

htmlcssbuttonbootstrap-4

Changing the number format in Python after applying styling

I am working with a dataframe that looks like this: Name Amount A 3,580,093,709.00 B 5,656,745,317.00 After applying some CSS styling, the Amount values turn into scientific notation, such as 3.58009e+09 and 5.39538e+07. Name Amount A 3. ...

pythoncssdataframepandas-styles

Tips for maximizing responsiveness with display:flex in Bootstrap?

I have a row with 3-cols containing a dropdown menu within each column. The dropdown menu appears below when an option is selected. Clicking the option button causes the height of the columns to extend, flex, or increase as intended. To achieve this effec ...

jquerytwitter-bootstrapcssxhtml

Creating a chic vertical stripe

Can someone help me create a vertical line that fades out at the end? I've attempted using the code below: div.vertical-line{ float:right; width:5px; background-color:black; margin-right:20px; background: #FFFFFF; background: ...

htmlcss

JSFiddle showcasing the Bootstrap grid system

I'm having trouble implementing bootstrap's grid system on jsfiddle. Check it out on jsfiddle I've tried using the example from the bootstrap documentation: <div class="row"> <div class="col-md-1">.col-md-1</div> ...

csstwitter-bootstrapgrid-layout