I've been trying these font-awesome icons to the center of the page but nothing seems to be working. Here is my code
.center {
text-align:center;
width:50%;
}
.icon: {
width: 200px;
height: 200px;
}
#icons {
display: inline-block;
text-align: center;
color: black;
padding-right: 50px;
width: 100px;
height: 100px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<div class="center">
<!-- Facebook -->
<i id="icons" class="fa fa-facebook" style="font-size: 65px;"></i>
<!-- Twitter -->
<i id="icons" class="fa fa-twitter" style="font-size: 65px;"></i>
<!--Github-->
<i id="icons" class="fa fa-github" style="font-size: 65px;"> </i>
<!--Reddit-->
<i id="icons" class="fa fa-reddit" style="font-size: 65px;"></i>
</div>
Just add center tag
<center>
<i id="icons" class="fa fa-facebook" style="font-size: 65px;"> </i>
<!-- Twitter -->
<i id="icons" class="fa fa-twitter" style="font-size: 65px;"></i>
<!--Github-->
<i id="icons" class="fa fa-github" style="font-size: 65px;"> </i>
<!--Reddit-->
<i id="icons" class="fa fa-reddit" style="font-size: 65px;"></i>
<br>
</center>
If anything goes wrong let me know
https://codepen.io/gvsakhil/pen/ZMoVXY I have added codepen, if needed checkit out
-> Just add margin: 0 auto; in .center class.
.center {
text-align:center;
width:50%;
margin: 0 auto;
}
.icon: {
width: 200px;
height: 200px;
}
#icons {
display: inline-block;
text-align: center;
color: black;
padding-right: 50px;
width: 100px;
height: 100px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<div class="center">
<!-- Facebook -->
<i id="icons" class="fa fa-facebook" style="font-size: 65px;"></i>
<!-- Twitter -->
<i id="icons" class="fa fa-twitter" style="font-size: 65px;"></i>
<!--Github-->
<i id="icons" class="fa fa-github" style="font-size: 65px;"> </i>
<!--Reddit-->
<i id="icons" class="fa fa-reddit" style="font-size: 65px;"></i>
</div>
Related
i am building an ecommerce website to learn html and css.I am creating the newsletter section in the site.i have given a blue background image under and the class #newsletter.and i made some css styling to the bg image.i want the image width fit to the screen.but the problem is the image is not filling the full screen.there is a gap on the left side and right side of the screen.i changed width to different sizes,but there is alaways gap on both left and right side.the class name of the css styling is #newsletter.i am giving out my full code here.i will give the full project css and html code here.kindly help me and sorry for the long post as i am new to coding.
style i have right now(check the blue newsleter"s bg image.you can see there is space in both left and right side it is not fit.
the below image is the style i want.you can see both left and right side of the blue image is fit to screen
#import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Spartan:wght#100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan' sans-serif;
}
h1{
font-size: 50PX;
line-height: 64px;
color: #222;
}
h2{
font-size: 46PX;
line-height: 54px;
color: #222;
}
h4{
font-size: 20PX;
color: #222;
}
h6{
font-weight: 700;
font-size: 12px
}
p{
font-size: 16PX;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1{
padding: 40px 80px;
}
.section-p1{
margin: 40px 0;
justify-content: space-between;
}
section-m1{
margin: 40px 0;
}
button.normal{
font-size: 14px;
font-weight: 600;
padding: 15px 30px;
color: #000;
background-color: #fff;
border-radius: 4px;
cursor: pointer;
border: none;
outline: none;
transition: 0.2s;
width: 250px;
margin: auto;
}
button.white{
font-size: 13px;
font-weight: 600;
padding: 11px 18px;
color: #fff;
background-color: transparent;
border-radius: 4px;
cursor: pointer;
border: 1px solid #fff;
outline: none;
transition: 0.2s;
width: 250px;
margin: auto;
}
body{
width: 100%;
}
/*header start*/
#header{
display: flex;
justify-content: space-between ;
align-items: center;
padding: 20px 80px;
background-color: #e3e6f3;
box-shadow: 0px 5px 15p rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar{
display: flex;
justify-content: center;
align-items: center;
}
#navbar li{
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a{
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active{
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after{
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#hero{
background-image: url("img/hero4.png");
height: 90vh;
width: 100%;
background-position: top 25 right 0;
background-size: cover;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
#hero h4{
padding-bottom: 15px;
}
#hero h1{
color: #088178;
}
#hero button{
background-image: url(img/button.png);
background-color: transparent;
color: #088178;
border:0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#feature{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#feature .fe-box{
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#feature .fe-box:hover{
box-shadow: 10px 10px 34px rgba(0, 0, 0, 0.03);
}
#feature .fe-box h6{
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#feature .fe-box img{
width: 100%;
margin-bottom: 10px;
}
#product1{
text-align: center;
}
#product1 .pro-container{
display: flex;
justify-content: space-between;
padding-top: 20px;
flex-wrap: wrap;
}
#product1 .pro{
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
position: relative;
}
#product1 .pro img{
width: 100%;
border-radius: 20px;
}
#product1 .pro .des{
text-align: start;
padding: 10px 0;
}
#product1 .pro .des span{
color: #606063;
font-size: 12px;
}
#product1 .pro .des h5{
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro .des i{
font-size: 25px;
color: rgb(241, 183, 25);
}
#product1 .pro .cart{
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50px;
background-color: #e3f6ea;
font-weight: 300;
color: #088178;
position: absolute;
border: 1px solid #cce7d0;
bottom: 20px;
right: 10px;
}
#banner{
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
background-image: url(img/banner/b2.jpg);
width: 100%;
height: 40vh;
background-size: cover;
background-position: center;
}
#banner h4{
color: #fff;
font-size: 25px;
padding: 30px 0;
}
#banner h2{
color: #fff;
font-size: 30px;
padding: 10px 0;
}
#banner h2 span{
color: #ef3636;
}
#banner button:hover{
background-color: #088178;
color: white;
}
#sm-banner{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#sm-banner .banner-box{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: center;
min-width: 820px;
height: 500px;
background-size: cover;
background-position: center;
background-image: url(img/banner/b17.jpg);
padding: 30px;
}
#sm-banner h4{
color: #fff;
font-size: 28px;
font-weight: 380;
}
#sm-banner h2{
color: #fff;
font-size: 38px;
font-weight: 900;
}
#newsletter{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
background-image: url("img/banner/b14.png");
background-repeat: no-repeat;
background-position: 20% 30%;
background-color: #041e42;
background-size: cover;
width: 100%;
object-fit: cover;
}
#newsletter h4{
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<img src="img/logo.png" class="logo">
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></l1>
<li>Shop</l1>
<li>Blog</l1>
<li>About</l1>
<li>Contact</li>
<li><i class="fa-solid fa-cart-arrow-down"></i></li>
</ul>
</div>
</section>
<section id="hero">
<h4>Trade-in-offer</h4>
<h2>Super Value Deals</h2>
<h1>On all products</h1>
<p>Save more with coupons & upto 70%off</p>
<button>Shop Now</button>
</section>
<section id="feature" class="section-p1">
<div class="fe-box">
<img src="img/features/f1.png">
<h6>Free Shipping</h6>
</div>
<div class="fe-box">
<img src="img/features/f2.png">
<h6>Online Order</h6>
</div>
<div class="fe-box">
<img src="img/features/f3.png">
<h6>Save Money</h6>
</div>
<div class="fe-box">
<img src="img/features/f4.png">
<h6>Promotions</h6>
</div>
<div class="fe-box">
<img src="img/features/f5.png">
<h6>Happy Sell</h6>
</div>
<div class="fe-box">
<img src="img/features/f6.png">
<h6>Support</h6>
</div>
</section>
<section id="product1" class="section-p1">
<h2>Featured Products</h2>
<p>Summer Collections</p>
<div class="pro-container">
<div class="pro">
<img src="img/products/f1.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/f2.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/f3.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/f4.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/f5.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/f6.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/f7.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/f8.jpg"
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
</div>
</section>
<section id="banner" class="section-m1">
<h4>Best Service</h4>
<h2>Up to <span>70% - off</span> on All T-shirts</h2>
<button class="normal">Explore More</button>
</section>
<section id="product1" class="section-p1">
<h2>New Arrivals</h2>
<p>Summer Collection New Modern Design</p>
<div class="pro-container">
<div class="pro">
<img src="img/products/n1.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/n2.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/n3.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/n4.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/n5.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/n6.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/n7.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<div class="pro">
<img src="img/products/n8.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart cart"></i>
</div>
<section id="sm-banner" class="section-p1">
<div class="banner-box">
<h4>Crazy deals</h4>
<h2>buy 1 get 1 Free</h2>
<button class="white">Learn More</button>
</div>
</section>
<section id="newsletter">
<div class="newstext">
<h4>Signup for Newsletters</h4>
<p>Get E-mail upadter of out latest shop and
<span>special offers</span>
</p>
</div>
<div class="form">
<input type="text" placeholder="Your Email Address">
<button>Sign up</button>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Unfortunately I cannot display the top image background in my sandbox, but I can assist you with the footer and the same issue should apply to the upper element/image.
.section-p1 {
padding: 40px 80px;
}
This .section-p1 class is causing your elements WITHIN itself to be limited to the padding provided.
Try to comment it out:
.section-p1 {
// padding: 40px 80px;
}
and see how it brings your footer to the desired width(as displayed above).
For your solution, you might want to move #newsletter outside of .section-p1 class.
I'm having a hell of a time trying to get a background color to show on a div. I have tried specifying width, height, overflow, etc. with no luck. The code is below. I can get inner div background to change, but not the containing div.
The div in question is header-top-container. Any help is greatly appreciated.
.header-top-container {
background: #F0F0F0;
overflow: hidden;
}
.header-top-container>.main-container {
padding-top: 0;
padding-bottom: 0;
display: flex;
}
.main-container {
position: relative;
max-width: 1260px;
margin: 0 auto;
padding: 15px;
}
body .header-top-container .external-store-tab {
width: 360px;
}
body .header-top-container .external-store-tab,
body .header-top-container .account-cart-wrapper {
position: relative;
width: 70%;
}
<div class="header-top-container">
<div class="main-container header-main-container">
<div class="external-store-tab">
<div class="tab-item">
<a href="https://www.example.org">
<img src="https://www.example.org/logo-foundation.png" class="tab-logo">
</a>
</div>
<div class="tab-item active">
<a href="http://store.example.org/">
<img src="https://www.example.org/logo-store.png" class="tab-logo">
</a>
</div>
</div>
<div class="account-cart-wrapper">
<a href="http://www.example.org/contact/" class="account-link hide-mb">
<span class="label" style="color:#008CA8;">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span class="bar-text" tyle="font-family: 'Open Sans',sans-serif;">Contact</span>
</span>
</a>
<a href="tel:800.222.5870" class="account-link">
<span class="label" style="color:#008CA8;">
<i class="fa fa-phone fa-lg" aria-hidden="true"></i>
<span class="bar-text" style="font-family: 'Open Sans',sans-serif;">800.222.5870</span>
</span>
</a>
<a href="https://store.example.org/customer/account/login/" class="skip-link skip-account account-link sign-in-bar">
<span class="label">
<i class="fa fa-user fa-lg" aria-hidden="true"></i>
<span class="bar-text" style="font-family: 'Open Sans',sans-serif;">Sign in</span>
</span>
</a>
<a href="https://store.example.org/checkout/cart/" class="skip-link skip-account account-link">
<span class="label">
<i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
Add to class "header-top-container", property "position:inherit" class, like following:
.header-top-container {
background: #F0F0F0;
overflow:hidden;
position: inherit;
}
Your #custom-layer1 has a background that matches the page. Your header-container-top is changing color, but is being 'painted' over so to speak by the background of #custom-layer1.
#header .head-social {
background-color: #7DC651;
width: 100%;
height: 37.48px;
}
#header .head-social h3 {
color: white;
font-size: 13px;
margin-top: 12px;
font-family: 'Open Sans';
text-align: right;
display: inline-block;
}
.social-links {
display: -webkit-inline-box;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="header">
<div class="head-social">
<div class="container">
<h3>I am a pretty website website, 12345</h3>
<div class="social-links">
<div class="facebook"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></div>
<div class="twitter"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></div>
<div class="youtube"><i class="fa fa-youtube fa-lg" aria-hidden="true"></i></div>
<div class="instagram"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></div>
<div class="google"><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
The text h3 and the fa-classes doesn't seem to align to the right of the div head-social. They are always on the left side of the div.
Try this...
#header .head-social{
background-color: #7DC651;
width:100%;
height: 37.48px;
}
#header .head-social h3 {
color: white;
font-size: 13px;
margin-top: 12px;
font-family: 'Open Sans';
text-align: right;
display: inline-block;
}
.social-links {
display: -webkit-inline-box;
}
#header .head-social {
text-align:right;
} //added this line
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="header">
<div class="head-social">
<div class="container">
<h3>I am a pretty website website, 12345</h3>
<div class="social-links">
<div class="facebook"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></div>
<div class="twitter"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></div>
<div class="youtube"><i class="fa fa-youtube fa-lg" aria-hidden="true"></i></div>
<div class="instagram"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></div>
<div class="google"><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
Try with it :
1. With align right :
<div id="header">
<div class="head-social">
<div class="container" align="right>
<h3>I am a pretty website website, 12345</h3>
<div class="social-links">
<div class="facebook"></i></div>
<div class="twitter"></i></div>
<div class="youtube"></i></div>
<div class="instagram"></i></div>
<div class="google"></i></div>
</div>
</div>
</div>
</div>
With float right :
.container { float:right; }
use float instead of text-align
set container to float:right in css
i hope it helpful for you
#header .head-social {
background-color: #7DC651;
width: 100%;
height: 37.48px;
}
#header .head-social h3 {
color: white;
font-size: 13px;
margin-top: 12px;
margin-left: 5px;
font-family: 'Open Sans';
display: inline-block;
}
.social-links {
display: -webkit-inline-box;
margin-top: 12px;
margin-left: 5px;
}
.container {
float: right;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="header">
<div class="head-social">
<div class="container">
<h3>I am a pretty website website, 12345</h3>
<div class="social-links">
<div class="facebook"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></div>
<div class="twitter"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></div>
<div class="youtube"><i class="fa fa-youtube fa-lg" aria-hidden="true"></i></div>
<div class="instagram"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></div>
<div class="google"><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
I have googled and searched on SO about this issue, and I just cant fix it.
It is really, really annoying and driving me crazy!!
I have a menu that is made up of several blocks. These are created by divs with display: inline-block
I have also tried float:left, but I need these all centered on the screen and this doesn't work.
With my inline-block, it works fine and adjusts to the size of the screen by making more rows - but the last row is always offset by 2 pixels!
This is my code and css...
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
.menublock {
width: 170px;
height: 150px;
margin: 0px;
padding: 0px;
display: inline-block;
background: #0074bc;
color: #fff;
cursor: pointer;
vertical-align: top;
}
.menublock-inner {
padding-top: 30px;
}
And the result is...
Take a look at this old link always gets me:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
So id do mine a little different like:
body {
background: #000;
}
.wrapper {
margin: 30px auto;
padding: 0;
text-align: center;
width: 100%;
max-width: 610px;
}
.menublock {
margin: 0;
padding: 0;
display: inline-block;
}
.menublock-inner {
margin: 0;
padding: 0;
display: table;
vertical-align: middle;
background: rgba(0,94, 184, 1);
height: 200px;
width: 200px;
}
.icon {
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
}
.fa {
}
span {
padding-top: 5px;
display: block;
color: white;
text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrapper">
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
</div>
<!-- eo: wrapper -->
I need to create the spacing between the two <i> tags, and make a vertical line in between them.
Here is my code:
#wrap {
width: 650px;
margin: 0 auto;
}
#left_col {
float: left;
width: 300px;
}
#right_col {
float: right;
width: 300px;
padding-left: 20px;
}
<div id="wrap">
<div id="left_col">
<p>Are you a Developer?</p>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px; padding-top: 20px;">
Register Your Project Online</i>
<br><i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
Wait for Project Approval </i>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
Raise funding in 90 days </i>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
Provide Regular construction updates </i>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
Complete and Sell Project </i>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
Destribute funds to Investor </i>
</div>
How can I increase the gaping between the <i> tag and add a vertical line at the end of every line?
Like this is one way. I think you want a vertical line like this :
#wrap {
width: 650px;
margin: 0 auto;
}
#left_col {
float: left;
width: 300px;
}
#right_col {
float: right;
width: 300px;
padding-left: 20px;
}
.cont i {
text-align: center;
margin: 5px;
padding:5px;
line-height: 25px;
}
.divider {
width: 50%;
height: 50px;
border-right:solid;
border-left-color: black;
}
.divider2 {
width: 50px;
height: 50px;
border-left:solid;
border-left-color: black;
}
<div id="wrap">
<div id="left_col" class="cont">
<p>Are you a Developer?</p>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px; padding-top: 20px;">
Register Your Project Online</i>
<div class="divider"></div>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
Wait for Project Approval </i>
<div class="divider"></div>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
Raise funding in 90 days </i>
<div class="divider"></div>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
Provide Regular construction updates </i>
<div class="divider"></div>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
Complete and Sell Project </i>
<div class="divider"></div>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
Destribute funds to Investor </i>
</div>
</div>
I have put two classes divider , divider2, change and play with width and height and border-left and border-right to get your desire line.
BTW, You may also want to check bootstrap timeline
You can add a line-height to the i and then to get the line under you add a
hr
tag.
i, cite, em, var, address, dfn {
line-height: 30px;
}
#wrap {
width: 650px;
margin: 0 auto;
}
#left_col {
float: left;
width: 300px;
}
#right_col {
float: right;
width: 300px;
padding-left: 20px;
}
<div id="wrap">
<div id="left_col">
<p>Are you a Developer?</p>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px; padding-top: 20px;">
Register Your Project Online</i>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
<hr>
Wait for Project Approval </i>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
<hr>
Raise funding in 90 days </i>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
<hr>
Provide Regular construction updates </i>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
<hr>
Complete and Sell Project </i>
<i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;">
<hr>
Destribute funds to Investor </i>
</div>