The alignment of the text next to the icons is not correct

Is it necessary to use flexbox, or is there an easier way to achieve the same result? It has been a while since I last practiced and I can't seem to remember much.


                .sadaka-contacts p {
                    color: #115c9b;
                    font-size: 14px;
                    line-height: 1.42;
                }

                .sadaka-contacts li {
                    list-style: none;
                    width: 35px;
                    height: 35px;
                    background: #1f76bd;
                    margin-bottom: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .sadaka-contacts li i {
                    color: white;
                }
            
        

                <div id="contact-area" class="sadaka-contacts">
                    <h3>SADAKA CONTACTS</h3>
                    <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla.</p>
                    <ul>
                        <li>
                            <i class="fa fa-map-marker"></i>
                            <p>135 Hay el nahda, Rabat, Morocco</p>
                        </li>
                        <li>
                            <i class="fa fa-phone"></i>
                            <p>00 210 25 55 55 11</p>
                        </li>
                        <li>
                            <i class="fa fa-envelope"></i>
                            <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d303c34311d3932303c3433733e3230">[email protected]</a></p>
                        </li>
                    </ul>
                </div>

This is how it currently looks.

This is the desired look for the design.

View image

htmlcssflexboxcss-grid

Answer №1

After making some adjustments, here is the updated code:

  1. I transferred the background and dimensions from the li element to the i element.
  2. I eliminated the justify-content: center property from the li element.
  3. I centered the icon within the i element by implementing a flexbox that is aligned at the center.
  4. I reset the default padding of the ul element to zero.

Feel free to check out the demo below. You can continue working on it from this point:

.sadaka-contacts p {
  color: #115c9b;
  font-size: 14px;
  line-height: 1.42;
}

.sadaka-contacts li {
  list-style: none;
  /*width: 35px;*/
  /*height: 35px;*/
  /*background: #1f76bd;*/
  /*margin-bottom: 5px;*/
  display: flex;
  /*justify-content: center;*/
  align-items: center;
}

.sadaka-contacts li i {
  color: white;
  /* ADDED THE BELOW */
  /* These style were applied to li before */
  width: 35px;
  height: 35px;
  background: #1f76bd;
  margin-bottom: 5px;
  /* Adding a separation margin */
  margin-right: 5px;
  /* Centering the icon */
  display: flex;
  justify-content: center;
  align-items: center;
}

.sadaka-contacts ul {
  padding: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div id="contact-area" class="sadaka-contacts">
  <h3>SADAKA CONTACTS</h3>
  <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla .</p>
  <ul>
    <li>
      <i class="fa fa-map-marker"></i>
      <p>135 Hay el nahda, Rabat, Morocco</p>
    </li>
    <li>
      <i class="fa fa-phone"></i>
      <p>00 210 25 55 55 11</p>
    </li>
    <li>
      <i class="fa fa-envelope"></i>
      <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb2beb6b39fbbb0b2beb6b1f1bcb0b2">[email protected]</a></p>
    </li>
  </ul>
</div>
</div>

Answer №2

Check out this amazing styling:

Apply background color to the icon container only.

 .youclass {
   display: inline;
    width: 35px;
    background: #1f76bd;
    height: 35px;
    margin-right: 10px;
 }
 
 .sadaka-contacts p {
    color: #115c9b;
    font-size: 14px;
    line-height: 1.42;
}

.sadaka-contacts li {
    list-style: none;
    height: 35px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;

}

.sadaka-contacts li i {
    color: white;

}
<div id= "contact-area" class="sadaka-contacts">
        <h3>SADAKA CONTACTS</h3>
        <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla .</p>

        <ul>
            <li>
                <div class="youclass">
                  <i class="fa fa-map-marker"></i>
                  </div>
                <p>135 Hay el nahda, Rabat, Morocco</p>
            </li>
        </ul>
    </div>
</div>

Answer №3

Here are the steps I took to create the desired UI:

  1. First, I treated everything as a flex with items aligned in a column. I styled the parent class 'sadaka-contacts' as follows:

    .sadaka-contacts {
    border: 1px solid black;
    color: #4040a1;
    display: flex;
    height: 240px;
    flex-direction: column;
    justify-content: space-between;
}

  2. Next, I added a bottom border for the title:

    .sadaka-contacts h3 {
    border-bottom: 1px solid blue;
}

  3. To remove the default margin added by web browsers for p elements, I adjusted the styles for the body:

    .sadaka-contacts p {
    color: #115c9b;
    font-size: 14px;
    line-height: 1.42;
    margin: 0;
 }

  4. I also removed padding and margin for ul elements and added the remaining styles:

    .sadaka-contacts ul {
     margin: 0;
     list-style: none;
     padding: 0;
 }

  5. To address the overlap of icons and text, I made the li element a flex item with a row as the flex direction. Here are the styles for list items:

    .sadaka-contacts ul > li {
     display: flex;
     flex-direction: row;
 }

  6. For the boxed alphabets, I applied the following styles:

    .sadaka-contacts ul > li > i {
    border: 1px solid #115c9b;
    border-radius: 12px;
    color: white;
    background: #115c9b;
    margin: 4px;
    min-width: 24px;
    padding: 4px;
}

  7. Finally, I centered the text within the list items horizontally using the 'align-self' property set to 'center'. The text style is as follows:

    .sadaka-contacts ul > li > p {
    align-self: center;
}

I hope this information is helpful.

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

Using Object Values and Subvalues to Assign Element Attributes in jQuery

I have a weekly schedule that I update regularly using a static table layout: <table> <tr class="live gm fsp"> <td>Oct. 7</td> <td>12:30 pm</td> <td class="prog">Show 1</td> <td>Team ...

javascriptjqueryhtmljsonobject

The navigation bar on the website highlights vibrant green arrows next to the

I'm having trouble implementing a bootstrap menu on my website using the code provided by Bootstrap. The menu is not displaying correctly and instead showing small green UL arrows. I have JavaScript and Bootstrap scripts in my project. Is there a way ...

htmlcssasp.net-mvctwitter-bootstrap

Ways to create distance between columns in Bootstrap 5

screenshot i want like this Looking at the image provided, there seems to be an issue with spacing between the red and blue columns. Despite trying various Bootstrap classes, the desired result has not been achieved. Adding m-4 to the Navbar, Header, and ...

htmlcssbootstrap-5spacingbootstrap-grid

Achieve the effect of bringing the div and its contents to the top when hovered over, all while keeping

I have designed a popup that includes multiple boxes. I want the width of the box to expand and be visible over all content on the webpage when a user hovers over any ".deviceboxes". I tried using ".deviceboxes:hover" which worked fine for the first box in ...

jqueryhtmlcss

Utilize import and export statements to transfer an HTML tag between two JavaScript files

I have two HTML files linked to two JS files. I want to save an HTML tag from HTML1 with JS1 in a Variable and export it. Then import it in the JS2 file and use it in HTML2 I have tried many ways but nothing seems to work, something as simple as this Exp ...

javascripthtmlcssreactjsnode.js

Is there a way to set the background of a HTML5 page as an image with a clickable link?

Lately, I've been working on a webpage dedicated to educating people about Mars. I wanted to spice things up by using an image as the background for my HTML5 page instead of the usual plain white color. However, just inserting a .jpg link didn't ...

htmlcssimageurlbackground

Steps for adding hover color to a div with linear gradient border

My current challenge involves adding a hover color to a specific div, but I'm facing obstacles due to the gradient background that was implemented to achieve border-radius functionality. This task is being carried out within a React Component using c ...

javascripthtmlcssreactjs

Guide on how to align h1 in the navigation bar

I've been attempting to center text on a nav bar but haven't been successful. What could I be overlooking? // include external modules import React, { Component } from "react"; import { Navbar } from "reactstrap"; import { Menu } from " ...

javascripthtmlcssreactjs

How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

Currently, I am working with an Angular grid (ag-grid) that dynamically creates div elements in the DOM to display data as the user scrolls or views different sections. As part of my testing process using Selenium WebDriver, I need to retrieve this data fr ...

javascriptcssangularjsseleniumag-grid

Can I customize the color of an SVG image with CSS (jQuery SVG image substitution)?

This is my innovative solution for easily embedding and styling SVG images using CSS. Traditionally, accessing and manipulating SVG elements with CSS has been a challenge without the use of complex JS frameworks. My method simplifies this process, making ...

jquerycsssvg

Customize the text color of select list options in Angular 5

Is there a way to style the foreground colors of select list options differently in this dropdown code? <select id="tier" class="form-control" [(ngModel)]="tierId"> <option *ngFor="let m of tierList" value="{{m.tier}}" > {{m.option ...

htmlcssangularangular5

The appearance of my HTML is distinct on Chrome for Windows and Safari for OSX

I have designed a prototype of some HTML code, but my website appears differently on Safari compared to how it looks on Chrome. While it displays correctly on Chrome, on Safari (both on OSX and mobile phones) the alignment seems off and randomly centered i ...

htmlcssmacosgoogle-chromesafari

Deactivating the submit button after a single click without compromising the form's functionality

In the past, I have posed this question without receiving a satisfactory solution. On my quiz website, I have four radio buttons for answer options. Upon clicking the submit button, a PHP script determines if the answer is accurate. My goal is to disable t ...

javascriptphphtmlforms

The Silent Disregard for CSS Files in React Rendered Pages

I'm currently working on a React application that I created using create-react-app. In my index.html file, I have linked it to my CSS file like this: <link rel="stylesheet" href="../src/site.css"></link> The content of the site.css file ...

cssreactjs

"Sliding through pictures with Bootstrap carousel placed beneath the

Currently, I am working on a website that requires a background image, although I personally do not prefer it. The client's preference is to have the navbar transparent so that the background image shows through it. Now, I would like to incorporate a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Building an expansive navigation menu with react-bootstrap

My current project involves creating a mega menu. Although I successfully made a responsive navbar, the challenge now is to implement a dropdown panel with 100% width. I've tried various approaches but haven't found one that works. Note: The oth ...

javascriptcssreactjsbootstrap-5react-bootstrap

An issue arises in Django where a particular field fails to display the accurate value when presented in a template

models.py The Order model in models.py defines various fields such as user, customer, card_id, mobile, email, total_price, payment_method, status, take_method, points_earned, date, and address. It also includes preset choices for payment options, order sta ...

pythonhtmldjango

Tips for troubleshooting objects within an Angular template in an HTML file

When I'm creating a template, I embed some Angular code within my HTML elements: <button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon" ng-if="(!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'curren ...

javascripthtmlangularjsgoogle-chrome

Text alignment from the lower edge

Imagine having a title inside an image, positioned near the bottom with a negative margin-top. The issue arises when the text orientation expands from top to bottom as more content is added. Is there a way to reverse this, so that the text div grows toward ...

htmlcss

Discrepancy in Bootstrap Navbar Brand and Links color appearance when attempting to change font and color across entire navbar

As a newcomer to CSS, I am facing an issue with my navbar. I want both the navbar brand and navbar links to be the same size and color. However, when I try to change the font and color of the entire navbar, only the font changes and the color remains incon ...

htmlcssbootstrap-4