The contact section refuses to align in the center

New Update! I've been struggling to align my contact information properly on the webpage. Currently, my code is causing all the small logos and text to appear on the side. However, my ultimate goal is to have them all in a single line. Any suggestions or assistance would be greatly appreciated!

   .media {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
     }

.media-body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
 <section class="contact-section">
         <div class="col-lg-3 offset-lg-1">
            <div class="media contact-info">
                <span class="contact-info__icon"><i class="ti-home"></i></span>
                <div class="media-body">
                    <h3>Buttonwood, California.</h3>
                    <p>Rosewoodly, PA 750918</p>
                </div>
            </div>
            <div class="media contact-info">
                <span class="contact-info__icon"><i class="ti-tablet"></i></span>
                <div class="media-body">
                    <h3>+2 257 995 2885</h3>
                    <p>Mon to Fri 7am to 6pm</p>
                </div>
            </div>
            <div class="media contact-info">
                <span class="contact-info__icon"><i class="ti-email"></i></span>
                <div class="media-body">
                    <h3><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88fbfdf8f8e7fafcc8fcedfbfcede5e9e1e4a6ebe7e5">[email protected]</a></h3>
                    <p>Send us a message anytime!</p>
                </div>
            </div>
        </div>

htmlcssbootstrap-4

Answer №1

If you want all children to be in a single line, you can achieve this by using flexbox. Simply wrap all children in one additional div and apply the display:flex property to it.

<section class="contact-section">
     <div class="col-lg-3 offset-lg-1">
       <div class="media-wrapper">
         <div class="media contact-info"></div>
         <div class="media contact-info"></div>
         <div class="media contact-info"></div>
       </div>
    </div>
</section>

Then, add the following CSS to the parent element:

.media-wrapper {
    display:flex;
}

You can adjust the alignment of child elements by adding the following lines to the parent's CSS:

For horizontal alignment: 

justify-content: center/flex-start/flex-end;

For vertical alignment: 

align-items: center/flex-start/flex-end;

You can also change the direction of the flexbox using flex-direction: row or flex-direction: column.

Note: When the direction changes, the alignment properties may switch their nature.

For more information, you can refer to the following resources:

https://codepen.io/ksilentstorm/pen/eYmeXvr

https://www.w3schools.com/css/css3_flexbox.asp

Answer №2

Give this a shot

.media {
  /* display: -webkit-box; */
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  float: left;
  text-align: center;
  margin: 0 17px;
}

.media-body {
  width: 100%;
}
<section class="contact-section">
  <div class="col-lg-3 offset-lg-1">
    <div class="media contact-info">
      <span class="contact-info__icon"><i class="ti-home"></i></span>
      <div class="media-body">
        <h3>Buttonwood, California.</h3>
        <p>Rosewoodly, PA 750918</p>
      </div>
    </div>
    <div class="media contact-info">
      <span class="contact-info__icon"><i class="ti-tablet"></i></span>
      <div class="media-body">
        <h3>+2 257 995 2885</h3>
        <p>Mon to Fri 7am to 6pm</p>
      </div>
    </div>
    <div class="media contact-info">
      <span class="contact-info__icon"><i class="ti-email"></i></span>
      <div class="media-body">
        <h3><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01727471716e73754175647275646c60686d2f626e6c">[email protected]</a></h3>
        <p>Send us a message anytime!</p>
      </div>
    </div>
  </div>

Answer №3

Revamped the structure of your HTML code and utilized flexbox for styling. Hopefully, this revision proves to be beneficial for you.

 <section>
     <div class="contact-section">
        <div class="address">
       <span class="contact-info__icon"><i class="ti-home"></i></span>
            <div class="media-body">
                <h3>Buttonwood, California.</h3>
                <p>Rosewoodly, PA 750918</p>
            </div>
        </div>
        <div class="contactInfo">
            <span class="contact-info__icon"><i class="ti-tablet"></i></span>
            <div class="media-body">
                <h3>+2 257 995 2885</h3>
                <p>Mon to Fri 7am to 6pm</p>
            </div>
        </div>
        <div class="email">
            <span class="contact-info__icon"><i class="ti-email"></i></span>
            <div class="media-body">
                <h3><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64171114140b161024100117100109050d084a070b09">[email protected]</a></h3>
                <p>Send us a message anytime!</p>
            </div>
        </div>
    </div>

Implemented a CSS tweak:

.contact-section{ display:flex;}

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

Move divs that are currently not visible on the screen to a new position using CSS animations

Upon entering the site, I would like certain divs to animate from an offscreen position. I came across this code snippet: $( document ).ready(function() { $('.box-wrapper').each(function(index, element) { setTimeout(function(){ ...

javascriptjqueryhtmlcssanimation

PhoneGap switches up the error type with each consecutive run

Why does PhoneGap change errors after every time it is compiled? Sometimes it runs without any issues, but then the same code throws strange errors like parse error or function not found, even though no changes were made to the code. Here is the code that ...

javascripthtmlcordova

Bootstrap 4: The mystery behind why the popover fails to appear inside a scrollable dropdown

Is there a way to replicate the behavior of Bootstrap 3 dropdowns with scrollbars on hover and popovers in Bootstrap 4? It seems that setting overflow:hidden; for scrolling functionality in dropdown menus also hides the popover. I have tried using containe ...

javascriptjquerycssbootstrap-4bootstrap-popover

The issue with the functionality of position absolute in CSS when used with JavaScript

<html> <head> <style> #wrapper{ position: absolute; top : 250px; width: 500px; height: 500px; border: 1px solid red; } .tagging{ position: absolute; border: 1px solid black; width : 20px; height: 30px; } & ...

javascriptcss

Getting the value of a JavaScript variable and storing it in a Python variable within a Python-CGI script

Is there a way to capture the value of a JavaScript variable and store it in a Python variable? I have a Python-CGI script that generates a selection box where the user can choose an option from a list. I want to then take this selected value and save it ...

javascriptpythonhtmlcgi

Fixed-top navigation bar in Bootstrap

Currently working on constructing a Single Page Application (SPA) using Bootstrap, where the navbar is fixed-top. Encountering an issue where content gets cut off by the navbar unless setting the element margin-top to 58px. Although using the specified sty ...

htmlcssangularbootstrap-4

There is a missing template at the specified location: index.html in Django

Hello, I recently created a new project and placed the index.html file in the templates directory. However, when I run the server, I encountered an error message stating TemplateDoesNotExist at /. Can anyone point out what mistake I might have made? Below ...

pythonhtmldjangotemplatessettings

Sending selected option from bootstrap dropdown to the subsequent php page

Is there a way to pass the selected value from a dropdown in Bootstrap to the next page? I have multiple options to choose from and I don't want to create separate pages with the same layout for each option. How can I pass the dropdown value to the ne ...

phphtmlcssdropdown

Stylish CSS menu design

I am struggling to set up a top menu bar using float: left. How can I achieve the desired behavior for a top menu bar? The code snippet below demonstrates what I have tried so far: * { margin:0; padding: 0; } #menu { background-color: yell ...

cssuser-interfacemenu

Selecting a folder path with Angular 6: A step-by-step guide

Currently, I am aiming to extract the folder path string without uploading any files. The goal is simply to capture the path for future use. Below is an example of how you can prompt users to select a file: <input id="folder-input" #folderRef type="fil ...

htmlangular6

The scrollbar CSS appears to be missing on iPhone browsers Chrome and Safari

After spending the entire day searching for a solution to override the irritating scrollbar issue on my iPhone, I came across this simple example: .scroller { background: lightblue; height: 1000px; max-width: 400px; margin: 90px auto; padding: ...

htmlcss

How to Use Vue.js to Find the Nearest Div Element with a Specific

Below is the HTML code I am working with: <div id="app"> <div class="image"> <div class="overlay"> <p>Some overlay text</p> </div> <img src="https://placeimg.com/640/480/any" class="img-fluid"> ...

javascripthtmlcssvue.js

CSS Transform animation does not work when a class is added programmatically, although it functions properly when toggling the class in Chrome

Attempting to create an animation for the transform of a div. Below is the code with transition and transform properties in Safari: #mydiv{ transition: all 2.3s cubic-bezier(1, 0, 0, 1); transform: scale(0.5); background:white; padding:30 ...

jquerycsscss-transitionscss-transforms

Centering text underneath bootstrap image design

After trying various methods, I still couldn't get the text to display directly below my images in the center. Below is the code I attempted: <div class="our_partners"> <div class="container"> <div class="row"> ...

htmlcsstwitter-bootstrap

Can a CSS Grid layout be achieved without prior knowledge of image sizes?

I am working on a project where I am pulling images from Reddit and aiming to showcase them in a gallery-style grid. I have tried using a flex display and resizing the images to match dimensions, but unfortunately not all images have the same dimensions ...

htmlcssreactjs

Is it possible to override CSS classes in Ionic without using app.scss?

I'm currently working on designing a dark theme for my ionic application by watching this tutorial. It's been effective for most of the classes, however, I've encountered some CSS classes that only respond to overrides in app.scss. If I try ...

cssangularionic-frameworkionic3

Position the div in the center, but for smaller sizes, switch to aligning

My current layout setup is as follows: Left side bar with a width of 200px and positioned at left: 0; Center section with a width of 700px and positioned at left: 250px; Right side bar with a width of 200px and positioned at right: 10px; While this arra ...

css

Retrieving data from a <span> element within a webpage created using ReactJS

I am completely new to the world of web design and development, so there may be some mistakes in my request. Essentially, I have a webpage that contains numerous span tags like the following example: These span tags are part of a significantly large DOM t ...

javascripthtmldomreactjs

JS custom scrollbar thumb size issues in relation to the scroll width of the element

I recently implemented a custom scrollbar for a component on my website. To determine the length of the scrollbar thumb, I use the formula viewportWidth / element.scrollWidth;. This provides me with a percentage value that I then apply to the thumb elemen ...

javascripthtmlcssreactjs

Ensure that the width does not decrease

Edited: included fiddle and code snippets I am facing an issue with the width of columns in my layout. The width of the columns is dynamically calculated based on the content they hold. However, when I filter the results using a search input for a specifi ...

htmlcssvue.js