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

Customize Joomla Module Styles

Here in the JhotelResrvation Module area, I've identified where the module files are located. However, I'm unable to make changes to the CSS despite trying custom CSS as well. My initial plan was to add padding to the dark-transparent box using c ...

htmlcssjoomla

Limit access to a specific route within the URL

Is there a way to ensure that users can access and download myfile.pdf without being able to see or access /root, /folder, or /subdirectory in the URL? This functionality can be implemented using HTML, Angular 6, ReactJS, or similar frameworks. ...

angularhtmlreactjsreact-router

Checking the length of user input with JavaScript

To ensure that the user enters at least 4 letters in a text box and show an error if they don't, I need help with the following code. It is partially working but currently allows submission even after showing the error message. I want to prevent subm ...

javascripthtml

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Hey there, is it possible to achieve this with CSS or JavaScript? I require it for a Birt report. ...

javascriptcssbirt

Need help with styling for disabled autocomplete? Check out the attached image

I'm currently working with material-ui and react to create a basic form. Everything is functioning properly except for a small UI issue that I can't seem to figure out how to resolve. When I utilize the browser's auto-complete feature, the i ...

htmlcssreactjsmaterial-ui

Mastering CSS: Optimizing Div Placement Across Sections

I am currently working on developing a sleek and modern landing page with multiple sections, each designed to catch the eye. This style is all the rage at the moment, featuring large headers, ample padding, bold text, and a visually appealing divider betwe ...

htmlcssreactjsnext.jstailwind-css

Having trouble accessing the height of a div within an Iframe

Here is the issue I am facing: I need my iFrame to adjust its size based on a div within it, but every attempt to retrieve the size of this div results in 0. var childiFrame = document.getElementById("myDiv"); console.log(childiFra ...

javascripthtmliframe

The CSS property for restricting white-space to nowrap is not functioning as

Having a div with multiple child divs floating left can be tricky. To prevent them from breaking, setting them to display:inline-block and white-space:nowrap seems like the solution. However, in some cases this may not work as expected. If your goal is to ...

htmlcssoverflowwhitespace

Unable to display Boostrap modal upon clicking href link

Can someone help me troubleshoot why my pop modal is not displaying after a user clicks on a specific link on my webpage? I have attempted the following: <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></s ...

javascripthtmlbootstrap-4

I would like some clarification on how bookmarking works

As I encountered a puzzling issue recently, I realize that I may need some assistance to navigate through it. It involves bookmarking some links for future reference. I attempted to search for answers online but found myself even more perplexed. Does boo ...

html

steps to retrieve JSON object using Angular service

In the login.js file, I have a module with a method called loginUser structured like this: ...function loginUser(){ var user={ email:loginVM.Email, password:loginVM.pwd }; console.log(user); loginService.login ...

javascripthtmlangularjsjson

Tips for accurately aligning a relative p tag within a td

Description: I am trying to prevent text overflow in a table cell and position the text underneath a header without wrapping it under an image. I have tried setting a static width for the image and adjusting the left property, but it is not working as expe ...

htmlcsshtml-tableposition

The appearance of random instances of the letter "L" within text on Internet Explorer 8

Help needed! I'm encountering an issue where mysterious "L" characters are appearing in IE 8. The problem is specifically occurring in the Healthcare Professionals section and the bottom two blocks of the page. Has anyone else experienced this or have ...

htmlcssinternet-explorer-8

Ways to modify the text of an HTML element when hovering over it

One of my elements contains the text &times; within a <span>. Is there a way to change this symbol to something else, like &infin;, when hovered over? <span class="change-text">&times;</span> When the mouse hovers over it, I ...

javascripthtmlcss

What is the best way to select the destination folder for output in Webpack?

Whenever I run webpack using "webpack --mode development", it generates a dist folder and places the bundle.js file inside it. My aim is to have it created and placed in the same directory instead. How can I achieve this? module.exports = { entry: " ...

javascripthtmlwebpack

Adjusting the size of a React element containing an SVG (d3)

In my simple react app, I have the following component structure: <div id='app'> <Navbar /> <Graph /> <Footer /> </div> The Navbar has a fixed height of 80px. The Footer has a fixed height of 40px. The Graph i ...

cssreactjsd3.jssvgresize

Elevate with Ease: Tailwind's Height Transition

I've been attempting to implement a transition effect using TailwindCSS, but I haven't found an updated version with the latest features. Here's the code snippet: <div id="fadeInElement" className={visible ? " w-2/3 px-5 t ...

javascriptcssreactjsjsxtailwind-css

Chrome Automatically Playing WebRTC Audio

My webapp has webrtc functionality, but I've noticed a strange issue. When connections are established between Chrome browsers, the audio is not played, while video is. However, this problem doesn't occur with Mozilla users. So... Chrome user 1 ...

javascripthtmlgoogle-chromewebrtc

Is there a way to adapt my existing navigation bar to collapse on smaller devices?

Struggling to make my navigation bar collapsible on my site designed for a class project. Wondering if this requires both HTML and CSS, or can it be achieved with just HTML since this is my first time working on responsive design. Below is the code I have ...

htmlcssresponsive-design

Ways to activate a function upon validation of an email input type

Within my HTML form, there is an input type="email" field that requires a valid email pattern for acceptance. I am attempting to send an AJAX request to the server to confirm whether the entered email already exists in the database after it has been verif ...

javascriptjqueryhtmlajax