I believe I am attempting to add some space to a row using CSS, or at least that's what I think I'm trying to achieve

Hey there, I need some help with adding an icon "services" section to my website. CSS is not my strongest suit, so I'm reaching out for assistance. My goal is to create blocks for the icons that don't touch the edge of the page and have a margin similar in width to the space between each block. Any help on this would be greatly appreciated. Thank you! Below is a link to my JSFiddle, please provide your edits directly on it if possible.

http://jsfiddle.net/hqtzaycq/2/

<div class="row">
                <div id="about">
                 <div class="col-lg-4  col-md-4 col-sm-4">
                     <div class="about-div">
                     <i class="fa fa-paper-plane-o fa-4x icon-round-border" ></i>
                   <h3 >Lorem ipsum</h3>
                 <hr />
                       <hr /&q...
htmlcss

Answer №1

To optimize the layout, consider replacing the row with a clearfix. By doing so, you can utilize the native margin and padding instead of overriding them.

Here is what to remove:

<div class="row">

Replace it with:

<div class="clearfix">

One common mistake made by new front end developers is overwriting classes instead of using the appropriate ones in the first place. Don't worry, it happens! :)

Check out your updated jFiddle here

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

Utilizing jQuery/Ajax to send an ID parameter to a PHP script

This code is where the user interacts. <html> <head> <title></title> <script src="jquery-1.9.1.js"></script> <script src="jquery.form.js"></script> </head> <body> <?php include 'con ...

javascriptphpjqueryhtmlajax

Draggable slider not functioning properly with linear interpolation

Recently, I've been delving into the world of "linear interpolation" and its application in creating easing effects. However, while the easing functionality of the draggable slider seems to be operational, I'm encountering an issue. The slider re ...

javascripthtmlcsssliderlerp

How come my directive is being updated when there are changes in a different instance of the same directive?

For the purpose of enabling Angular binding to work, I developed a straightforward directive wrapper around the HTML file input. Below is the code for my directive: angular.module('myApp').directive('inputFile', InputFileDirective); f ...

javascripthtmlangularjs

Programmatically setting focus in Ionic

In my Ionic and Angular component, I am attempting to programmatically set focus after the page has loaded. Here is the code: item.component.html: <ion-row> <ion-col col-5> <ion-item > <ion-label&g ...

cssangularionic3

Obtaining gender information by utilizing checkboxes in Angular 7

I have developed an Angular application that enables users to filter samples by gender using checkboxes. The options include male, female, or both genders selected. Currently, the filtering works for selecting either male or female individually, as well as ...

htmlangulartypescript

Display the item for which the date is more recent than today's date

Is there a way to display only upcoming 'events' on my page based on their event_date? <% for (let event of events){%> <div class="card mb-3"> <div class="row"> <div class="col ...

javascriptcssmongodbmongoose

Decrease the size of the hyperlink area to only the center portion of the text for a more precise click target

Normal text links are present: <a href="projects.html">Projects</a> Is it feasible to make only the middle part of the letters clickable? Such as excluding the top of 'P' or the bottom of 'j'? a { font-size: 50px; ...

htmlcss

The data in MongoDB is organized using unique identifiers called ObjectId

I am currently working on a MEAN Crud project and encountering some issues. Despite the data being received in the mongodb, it is displaying as an objectId instead of the actual content. You can see this issue in the image below: https://i.stack.imgur.com ...

htmlangularjsnode.jsmongodbexpress

Stylish Wave Animation Effects in CSS for iPad Native Application

The ripple effect on the iPad Native app is malfunctioning. The effect is mistakenly applied to all buttons in the navigation instead of just the li elements. Please identify the error and provide a solution. (function (window, $) { $(function() ...

javascriptjqueryhtmlcss

Having trouble clicking on SubMenu with selenium web driver

Currently, I am looking into automating a UI application. In this application, there is a menu that displays sub-menus upon hovering the mouse over it. However, I am facing an issue where I am unable to click on the items within the sub-menu. Here is the ...

htmlcssselenium

Is it necessary to bring in CSS for the following page?

Should CSS be imported and used across multiple pages in a web application? Is the page structure outlined below considered acceptable, or is there a standard practice to follow? /pages /home index.js index.module.css /cart ...

cssreactjsnext.jsdirectory-structurereact-css-modules

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

I am looking to create a multi-select dropdown in Angular where the selected values are displayed as chip tags. Users should be able to unselect a value by clicking on the 'X' sign next to the chip tag, removing it from the selection. <searcha ...

javascriptcssangulartypescriptdrop-down-menu

Expansive Offspring Division stretching to the Entire Vertical Length of its Guardian Division

I'm attempting to achieve full coverage of the parent div section by my child div section. Take a look at the Example URL (specifically where the Canadian Flag Stand Up Paddle Boarders are located) towards the bottom: Essentially, when I set the widt ...

htmlcssdynamicheight

What methods can be used to ensure a div reaches all the way down to a sticky footer?

I'm currently working on a layout with a sticky footer, and I have a specific div that needs to extend all the way down to the footer. However, simply setting the height to 100% doesn't achieve the desired result. I've also experimented with ...

htmlcsssticky-footer

Stopping all animations with JQuery animate()

I have a question about stopping multiple animations. Here's some pseudocode to illustrate my situation: CSS #div1 { position: absolute; background-image: url("gfx/cat.jpg"); width: 60px; height: 70px; background-size: 50%; b ...

javascriptjquerycss

I can't seem to figure out why this isn't functioning properly

Upon examining the script, you'll notice the interval() function at the very bottom. The issue arises from bc-(AEfficiency*100)/5; monz+((AEfficiency*100)/5)((AFluencyAProduct)/100); For some reason, "bc" and "monz" remain unchanged. Why is that so? T ...

javascripthtmlcssintervals

Utilizing negative values in lineTo, strokeRect, and fillRect functions

Is it possible to input negative numbers into the drawing primitives of HTML5 canvas? For instance, if I apply a translation of (100,100), would I be able to draw a rectangle or line with coordinates (-25,-25)? Initial testing using lineTo seems inconclus ...

javascripthtmlcanvas

every cell should be painted a distinct hue

I need to create a 10x10 array in JavaScript and fill each cell in the 2D array with different colors using canvas. I have managed to do this part, but now I am stuck on how to check if each cell has a different color from its neighbors. Any suggestions ...

javascripthtmlcanvas

Does the input password typically submit on its own?

When attempting to create a form, I encountered an unexpected behavior. <form> <input type="text" autocomplete="username" style="display:none;"> <label for="password">password:</label><input type="password" autocomplete="c ...

html

Creating a personalized design for MUI TextField spin button

Looking to customize the appearance of the up/down spin buttons in MUI TextField. https://i.sstatic.net/DcG66.png Desiring white arrows and a black surrounding area that's slightly larger, akin to this: https://i.sstatic.net/ZxMJw.png I'm aware ...

htmlcssreactjstypescriptmaterial-ui