Creating a contact page with Font Awesome icons similar to my design using Flexbox in CSS

How can I achieve the desired layout for this image?

I have written some code and applied CSS to get the output, but I encountered an issue. When the text in my address section is too large, the icon gets misaligned and collapses. How can I fix this issue without using bootstrap? I want to learn more about using the flex property. Here is a link to my JSFiddle.

 *{
      margin: 0;
    }
    section{
      background-color: #555;
      padding: 2rem 0;
      text-align: center;
    }
    .contact{
      display: inline-block;
      text-align: left;
    }
    .contact h2{
      color: white;
      font-size: 1.125rem;
      font-weight: 500;
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    .contact li{
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .contact li:last-child{
      margin: 0;
    }
    .contact a{
      color: white;
      text-decoration: none;
    }
    .contact a:hover{
      color: yellow;
    }
    .contact p{
      color: white;
      line-height: 1.4;
    }
    .contact .fa{
      color: white;
      font-size: 1.5rem;
      line-height: 30px;
      margin-right: 10px;
      width: 30px;
      height: 30px;
      text-align: center;
    }
 <section>
      <div class="contact">
        <h2>Contact us</h2>
      <ul>
        <li>
          <i class="fa fa-envelope"></i> 
          <a href="#"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7302061600071a1c1d00331d1604101c5d101c1e">[email protected]</a></a>
        </li>
        <li>
          <i class="fa fa-phone"></i> 
          <a href="#">111-222-333</a>
        </li>
        <li>
          <i class="fa fa-building-o"></i>
          <p>NewCo, Inc <br>
            123 Main St. <br>
            Somewhere, CA 12345
          </p>
        </li>
      </ul>
      </div>
      
    </section>
htmlcssflexboxfont-awesome

Answer №1

Since the h2 element does not contain an icon on its left side, it requires compensation for this. Additionally, the default padding of the ul element needs to be addressed.

To achieve the desired outcome, you can introduce a new rule, .contact ul, with padding-left: 0. Add margin-left: 40px; (the total width including the right margin of the icon) to the existing .contact h2 rule while removing text-align: center.

This adjustment will align elements as intended:

*{
  margin: 0;
}
section{
  background-color: #555;
  padding: 2rem 0;
  text-align: center;
}
.contact{
  display: inline-block;
  text-align: left;
}
.contact h2{
  color: white;
  font-size: 1.125rem;
  font-weight: 500;
  /*text-align: center;                   removed */
  text-transform: uppercase;
  margin-bottom: 20px;
  margin-left: 40px;                  /* added */
}
.contact ul{
  padding-left: 0;                    /* added */
}
.contact li{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.contact li:last-child{
  margin: 0;
}
.contact a{
  color: white;
  text-decoration: none;
}
.contact a:hover{
  color: yellow;
}
.contact p{
  color: white;
  line-height: 1.4;
}
.contact .fa{
  color: white;
  font-size: 1.5rem;
  line-height: 30px;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  text-align: center;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<section>
  <div class="contact">
    <h2>Contact us</h2>
    <ul>
      <li>
        <i class="fa fa-envelope"></i>
        <a href="#"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2b3b7a7b1b6abadacb182aca7b5a1adeca1adaf">[email protected]</a></a>
      </li>
      <li>
        <i class="fa fa-phone"></i>
        <a href="#">111-222-333</a>
      </li>
      <li>
        <i class="fa fa-building-o"></i>
        <p>NewCo, Inc <br> 123 Main St. 123 Main St.123 Main St. <br> Somewhere, CA 12345
        </p>
      </li>
    </ul>
  </div>

</section>

</body>

</html>

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

Inheriting the viewBox attribute with SvgIcon

I have a collection of unique custom SVGs, each with its own distinct viewBox. First Custom SVG <svg viewBox="-4 -4 24 24"><path something/></svg> Second Custom SVG <svg viewBox="-5 -7 24 24"><path something ...

cssreactjsmaterial-ui

Element with adhesive properties alters its color at a particular location

I need the sticky element to change colors at specific points and then revert back to its original color. The color should be orange initially, green on block 2, and orange again on block 3. For the complete code and to address any issues with jQuery, pl ...

javascripthtmljquerycss

Pass data to three.js using an input form

I'm trying to figure out how to pass the value of an input form to a three.js workspace. Here's my code where I want to use a slider to change the radius of a sphere, without relying on the built-in controls of three.js since I'm new to HTML ...

javascripthtmlthree.js

Four boxes sharing identical code, yet yielding distinct outcomes

Can someone help me understand the concept of positioning in CSS? I created a simple code with 4 boxes that have identical width and height settings. When I position them as fixed or absolute, they look fine and identical. However, when I position them wit ...

cssposition

Pedestrian crossing Cordova experiences delayed response despite ontouchstart attempts to fix it

I have been experiencing a delay issue when using a CSS button with the ":active" pseudo-class on my phone. Every time I click the buttons, there is a noticeable delay before entering the active phase. Here is my CSS code: .btn {...} .btn:active{...} To ...

androidjquerycsscordovacrosswalk-runtime

Is there a method to automatically execute an 'onchange' function whenever a value is updated due to an AJAX response?

Many drop down menus are present on my page; <... onchange="callthisfunction(...)"...> While a manual change easily triggers the function, using ajax to load saved data does not register the value as changed and the function is not triggered. Is th ...

htmlajaxonchange

Utilizing Python and Selenium for Xpath, extracting text from a span tag within a web table

Struggling with this one, I've carefully gone through all previous posts before reaching out for help. The structure of the HTML web table is provided below. I am specifically interested in extracting the date from the span tag, and here are the vari ...

pythonhtmlselenium-webdriverxpath

Struggling with a JQuery function that fails to perform addition

I'm experiencing an issue with my code where the math doesn't add up when trying to sum values under the venting selection. Instead of adding up, it just displays as text. I have an event set up that should populate the values upon selecting valu ...

jqueryhtmlfunctionjquery-mobile

CSS login validator immobilized

In my Visual Studio project, I am facing an issue with applying CSS to two requiredfield validators. I have tried using the following code: #vdtrUserLogin { top:65px; left:750; position:absolute} #vdtrPasswordLogin0 { top:65px; left:900; position:absolute ...

htmlcssvisual-studio

How can I display table rows along with their child table rows in Angular?

Is there a way to display API data in a table using Angular? The table should have collapsible rows with nested child rows. This is the JSON file structure: { "collapse1": [ { "name": "Soil", "budget": 12345, "child": [ { ...

javascripthtmlangulartypescript

Implementing translation text into a PHP database

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Translate and Save Text</title> </head> <body> <form action="" method="post" name="theform"> <table width="693" border="1" style="table-l ...

javascriptphphtmlmysqlgoogle-translate

Turn off CSS scroll snapping past a specific threshold

Hey there! I have a total of 7 sections in my layout. The first 4 sections are all CMYK, while the last 3 are RGB. My current challenge is trying to prevent scroll snapping on the RGB sections. The issue arises when I apply scroll-snap-align: start; to t ...

htmlcssscroll-snap

Utilize Python to extract information from an HTML table

I am looking to extract data from an HTML table using a Python script and save it as variables that can be later utilized in the same script after loading them in if they exist, into a separate file. Additionally, I would like the script to disregard the f ...

pythonhtmlextract

What is the most crucial element to focus on when initially building a website?

I have recently embarked on the journey of learning various programming languages for web development, and I strongly believe that the best way to enhance my skills is by brainstorming ideas and bringing them to life through coding. (Please feel free to co ...

phphtmlcss

Tips for creating animated images with a mask or clip using HTML, CSS, and jQuery

I am attempting to animate the movement of an image under a stationary mask. I have 2 methods for achieving this: one using the mask property and the other using clip First method using Mask : View working script at http://jsfiddle.net/2Aecz/ or below & ...

jqueryhtmlcssanimationhtml5-canvas

How can I utilize CSS shapes to create clickable images?

I'm facing a challenge in making an input field and button functional even when they are positioned behind a uniquely shaped PNG image. https://i.stack.imgur.com/eOg0N.jpg Initially, I believed that by applying a shape to the image, it would automat ...

htmlcssshapescss-shapes

What is the best way to ensure that every item on a list can be

Is there a way to make both the left and right sides of a list item clickable? Currently, only the right side is clickable in my case. Any suggestions? This is my HTML: <body> <aside id = "aside"> <div id="column"> ...

htmlcss

Is there a way to determine whether my CSS style modifications will impact other web pages?

Managing a team of junior developers has its challenges, especially when they unknowingly make CSS style changes that impact multiple pages on our website. Is there a tool or method available to alert them that modifying the color of a specific class will ...

css

Tips for toggling the visibility of an element when a button is clicked in React

In my todo list, I need to display the details of each item when clicked on a button. There are two buttons available: "View Details" and "Hide Details". Below is the code snippet: class Todos extends React.Component{ construc ...

javascripthtmlcssreactjs

Is there a simple method to convert XML to HTML and then store the resulting HTML file?

Looking to utilize an XML file for creating HTML emails? I can create an XSL file to convert it to HTML, but am unsure how to save or copy the resulting HTML. Simply viewing the source of the XML file shows the original XML source, not the transformed HTML ...

htmlxmlxslt