Question posted in 
I’m currently facing a challenge aligning the email and "Call Us" texts according to a specific black line, as illustrated in the image below:
I’ve attempted to address this issue using HTML/CSS, and you can find my current approach in this:
index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="footer-info">
<h3 class="footer-title">Contact Us</h3>
<ul class="footer-adress">
<li>
<i class="fa-solid fa-location-dot"></i>
<span>House 1, Road 3, Section 6, Mirpur, Dhaka 1216</span>
</li>
<li>
<i class="fa-solid fa-phone"></i>
<span>
Call Us :<br />
<span>
<a href={"tel:+88 01740-214622"} class="white_color">
+88 01740-214622,
</a>
</span>
<span>
<a href={"tel:+88 01912-137844"} class="white_color">
+88 01912-137844
</a>
</span>
</span>
</li>
<li>
<i class="fa-solid fa-envelope"></i>
<span>Email : [email protected], [email protected]</span>
</li>
</ul>
</div>
style.css
.footer-info{
width: 16%;
}
.footer-info .footer-title {
color: #000;
border-bottom: 1px solid #000;
padding-bottom: 15px;
margin-bottom: 20px;
font-size: 22px;
text-transform: uppercase;
padding-left: 35px;
}
.footer-info .footer-adress {
list-style-type: none;
margin: 0px;
}
.footer-info .footer-adress li {
float: left;
width: 100%;
margin: 0;
display: table;
padding: 5px 0px;
}
.footer-info .footer-adress li>i {
padding-right: 8px;
}
.footer-info .footer-adress li span {
display: table-cell;
vertical-align: middle;
font-size: 14px;
line-height: 24px;
}
Could someone provide insights or suggestions on how to achieve this alignment effectively within the HTML/CSS framework? Any help or guidance would be greatly appreciated. Thank you.
2
Answers
Hope this will help you:
I just put the texts inside a span and updated the styles.
Here I will change the minor structure for the label and content alignment and set it to the as per your requirement. In style, I have removed the float property and used the flexbox property for the current best practice. When using the flex, you can set the text and content vertically and horizontally.
Use the below code to fulfil your requirement.
Please see the big screen Currently, I have not changed the footer-info width:16%, but as you can see in your CSS, you can change the value for the small screen.