"I can't seem to get this alignment right. What's going on

Is there a way to adjust the spacing more effectively? When the screen is resized, there is a large gap as highlighted in the red circle. My goal is to have it align correctly with the other divs instead of its current behavior. Thank you!

https://i.sstatic.net/53svk.png

#howItWorks h2 {
  margin-bottom: 30px;
}

.services {
  position: relative;
}
.services .service {
  padding: 30px 15px 30px;
  text-align: center !important;
  z-index: 1;
}
... (CSS code continues)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<section id="howItWorks">
    <div class="container">
        ... (HTML code continues)
    </section>
htmlcss

Answer №1

Adjust the block heights to be the same for a better display.

.services .service {
  height: 250px;
  ...
}


#howItWorks h2 {
  margin-bottom: 30px;
}

.services {
  position: relative;
}
.services .service {
  height: 250px;
  padding: 30px 15px 30px;
  text-align: center !important;
  z-index: 1;
}
.services .service .service-icon {
  color: #292929;
  margin-top: 15px;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.services .service p {
  margin-bottom: 20px;
  max-width: 385px;
  margin: 0 auto auto;
}
.services .service h3 {
  font-size: 1.2em;
  font-weight: bolder;
  position: relative;
  padding: 10px 0 15px;
  ...

@media screen and (max-width: 992px) {
  .services {
    margin-top: 35px;
  }
}
@media screen and (max-width: 992px) {
  .services .service .service-icon {
    margin-top: 5px !important;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BV ...
...
</section>

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

Creating a child div that expands to the same size as its parent div using CSS only

I am looking to create two div elements with 100% height. The parent div should display an image and adjust its size automatically. The child div should act as a color filter and maintain the same size as the parent div even when the page is resized. I ...

htmlcssresize

Is there a way to display one of the divs in sequence each time the page is reloaded?

Is there a way to display the divs sequentially when the page is refreshed? For instance, on the initial load, only div 1 should appear, and with each refresh it should cycle through divs 2, 3, 4, and 5 before starting over. Below is an example I'm c ...

javascripthtmljquery

Displaying the number zero in TYPO3 Fluid without it being empty or NULL

Within my TYPO3 Fluid template, I am encountering an issue where I need to display a value only if it is not empty. Currently, my approach is as follows: <f:if condition="{myvalue}"> <div class="myclass">{myvalue}</div> </f:if> Th ...

htmltypo3fluid

Forwarding the geographic coordinates directly to the system's database

I have a unique script that retrieves the precise latitude and longitude position. It then automatically sends this data to a database without the need for user input. <script> function getPosition(position) { var latitude = position.coor ...

javascripthtmlnode.js

Hiding Button in code behind

I have around 100 buttons in a list. Initially, I have set their visibility to false in the ASPX page. Now, I need to change the visibility to true from the code-behind when required. Since there are too many buttons, it's not feasible to individuall ...

c#htmlcssasp.net

Tips for aligning text and an image next to each other within a table column using HTML

I have a table where I am displaying an image and text in separate columns, with the image above the text. However, I want to showcase them side by side and ensure that the table fits perfectly on the screen without any scroll bars. Here is my HTML code s ...

htmlcss

Issue with hiding div using jQuery's length option

I'm currently using Drupal 7.0 along with the Galleria Javascript Image Gallery in fullscreen theme. My theme includes two navigation buttons, and here is the CSS code for them: .galleria-image-nav { height: 159px; opacity: 0.8; position: fixed ...

jquerycssdrupal

Implement a dialog on top of a current web page, achieve php-ajax query result, and enhance with

My website features 'dynamic' content, where 'static' nav-buttons replace specific div contents upon clicking. While I am able to retrieve my php/ajax results in a dialog box, I am struggling with placing this dialog above my current p ...

javascriptphphtmlajaxjquery-mobile

Beginner in CSS wanting to set background image for input field

I am working on incorporating icons into my project. The image I have contains an array of 16x16 icons at this URL: "http://www.freepbx.org/v3/browser/trunk/assets/css/jquery/vader/images/ui-icons_cd0a0a_256x240.png?rev=1" Does anyone know how I can selec ...

css

Positioning my login form in the right spot is proving to be a challenge

I'm working on integrating this form into my website, but I'm having trouble placing it in the top right corner of the header. Below is the HTML code: $(function(){ var $form_inputs = $('form input'); var $rainbow_and_b ...

htmlcssforms

A guide to using JavaScript to retrieve a CSV file in HTML and store its contents in an array

I am currently working in AngularJs with the objective of uploading a file and saving it as an array using JavaScript. Below is my HTML code: <input type="file" id="uploadFile" name="uploadFile" accept=".csv" required /> <button ng-click="proces ...

javascripthtmlarraysangularjs

Reposition text below images in Meta Slider

I have a website where I am utilizing Meta Slider within Wordpress. I would like to position the captions below the images instead of on top of them. Meta Slider claims this feature is only available in the Pro version, but could it be achieved by adjustin ...

css

A step-by-step guide on how to exclusively print items that have been selected using a checkbox in AngularJS

I have created two tables and added a checkbox for each one. Instead of default checkboxes, I have used images that change when clicked. Here is the code snippet: <button class="btn btn-lg btn-customPrint-md no-print" ng-click="checkBoxPrint2 = !check ...

htmlcssangularjscheckbox

What is the process for linking functionality to buttons in Embedded Elixir?

When it comes to rendering templates, I follow this method: <%= for country <- @countries do %> <div> <div>A compilation of countries you have visited</div> <a href="/countries/<%= String.downcase(country) %& ...

htmlelixirphoenix-framework

What steps should I take to make the code in jsfiddle functional on my Visual Studio Code platform?

const canvasEle = document.getElementById('drawing-container'); const canvasPad = document.getElementById('pad'); const toolbar = document.getElementById('toolbar'); const context = canvasEle.getContext('2d'); const ...

javascripthtmlcsscanvasjsfiddle

Load full html content, including doctype, into a jQuery container | Block scripts from running in iFrames

I am attempting to fetch an entire HTML file using AJAX and then manipulate the DOM with jQuery. This means that the retrieved HTML document includes a doctype and other top-level elements. The process of retrieving the HTML is straightforward: $.get(&ap ...

javascriptjqueryhtmlajax

What is the best way to programmatically select a checkbox that was created dynamically using jQuery?

I've been scouring the internet trying to find information on what I'm attempting to accomplish, but so far I haven't come across anything helpful. The issue I'm facing is with a form that has a section dynamically added using JavaScri ...

javascriptjqueryhtmlformsfrontend

CSS - Resizing Images

I am experiencing an issue with the width of an image on my website. I want it to span 100% of the browser frame, but it is currently limited to only 1000px wide. Please take a look at: The image in question is located at the top of the page. Is there a ...

cssimagewidth

Bootstrap is causing issues with unidentified div elements

I recently embarked on creating a slideshow using HTML, CSS, and jQuery. After completing the slideshow, I decided to add an interactive page beneath it. To streamline the layout process, I opted to utilize Bootstrap. However, upon loading Bootstrap, I en ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ensuring a height of 100% with the utilization of two divs positioned using float left and right, along with

It's really quite simple: HTML: <div> <section class="left"> </section> <section class="right"> </section> <div class="clear"></div> </div> CSS: div ...

javascriptjqueryhtmlcss