I am working on my website and I ran into an issue with this part of my website. So I'm trying to add a skills section and I used display: grid, but the height is not matched with its content. The height is shorter than it should be.
First, I tried to fix it with height: x vh, but I realized it might not be the perfect solution for responsiveness.
I can also share the link to my website if you prefer.
.skills-section {
background-color: #626262;
margin-top: 100px;
text-align: center;
height: auto;
}
.wrapper {
width: 85%;
margin: 0 auto;
}
.skills-header {
font-family: 'Martel', serif;
font-weight: 900;
font-size: 2rem;
color: white;
padding-top: 20px;
}
.skills-container {
justify-items: center;
color: white;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 100%);
}
.skills-header p,
.fa-html5,
.fa-css3-alt,
.fa-sass,
.fa-js-square,
.fa-dollar-sign,
.fa-react,
.fa-fire,
.fa-node-js,
.fa-git-alt,
.fa-cogs,
.fa-universal-access,
.fa-mobile-alt {
text-shadow: 2px 2px 5px #F99A14;
}
.skills-logo {
display: inline-block;
height: 40px;
width: 65px;
margin: 20px;
}
.skills-logo p{
display: inline-block;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1rem;
}
<section class="skills-section">
<div class="wrapper">
<div class="skills-header">
<p>Skills</p>
</div>
<div class="skills-container">
<div class="skills-logo">
<i class="fab fa-html5 fa-3x"></i>
<p>HTML</p>
</div>
<div class="skills-logo">
<i class="fab fa-css3-alt fa-3x"></i>
<p>CSS</p>
</div>
<div class="skills-logo">
<i class="fab fa-sass fa-3x"></i>
<p>Sass</p>
</div>
<div class="skills-logo">
<i class="fab fa-js-square fa-3x"></i>
<p>JavaScript</p>
</div>
<div class="skills-logo">
<i class="fas fa-dollar-sign fa-3x"></i>
<p>jQuery</p>
</div>
<div class="skills-logo">
<i class="fab fa-react fa-3x"></i>
<p>React</p>
</div>
<div class="skills-logo">
<i class="fas fa-fire fa-3x"></i>
<p>Firebase</p>
</div>
<div class="skills-logo">
<i class="fab fa-node-js fa-3x"></i>
<p>Node js</p>
</div>
<div class="skills-logo">
<i class="fab fa-git-alt fa-3x"></i>
<p>Git</p>
</div>
<div class="skills-logo">
<i class="fas fa-cogs fa-3x"></i>
<p>Rest APIs</p>
</div>
<div class="skills-logo">
<i class="fas fa-universal-access fa-3x"></i>
<p>Web Accessibility</p>
</div>
<div class="skills-logo">
<i class="fas fa-mobile-alt fa-3x"></i>
<p>Responsive Design</p>
</div>
</div>
</div>
</section>
I have tested your code, and found out that why is it happening like this. I have just removed one piece of code, and it worked! Code snippet below:
.skills-section {
background-color: #626262;
margin-top: 100px;
text-align: center;
width: 100%;
}
.wrapper {
width: 85%;
}
.skills-header {
font-family: 'Martel', serif;
font-weight: 900;
font-size: 2rem;
color: white;
padding-top: 20px;
}
.skills-container {
justify-items: center;
color: white;
display: grid;
grid-template-columns: repeat(6, 95px);
grid-template-rows: repeat(2);
}
.skills-header p,
.fa-html5,
.fa-css3-alt,
.fa-sass,
.fa-js-square,
.fa-dollar-sign,
.fa-react,
.fa-fire,
.fa-node-js,
.fa-git-alt,
.fa-cogs,
.fa-universal-access,
.fa-mobile-alt {
text-shadow: 2px 2px 5px #F99A14;
}
.skills-logo {
display: inline-block;
margin: 20px;
}
.skills-logo p {
display: inline-block;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<section class="skills-section">
<div class="wrapper">
<div class="skills-header">
<p>Skills</p>
</div>
<div class="skills-container">
<div class="skills-logo">
<i class="fab fa-html5 fa-3x"></i>
<p>HTML</p>
</div>
<div class="skills-logo">
<i class="fab fa-css3-alt fa-3x"></i>
<p>CSS</p>
</div>
<div class="skills-logo">
<i class="fab fa-sass fa-3x"></i>
<p>Sass</p>
</div>
<div class="skills-logo">
<i class="fab fa-js-square fa-3x"></i>
<p>JavaScript</p>
</div>
<div class="skills-logo">
<i class="fas fa-dollar-sign fa-3x"></i>
<p>jQuery</p>
</div>
<div class="skills-logo">
<i class="fab fa-react fa-3x"></i>
<p>React</p>
</div>
<div class="skills-logo">
<i class="fas fa-fire fa-3x"></i>
<p>Firebase</p>
</div>
<div class="skills-logo">
<i class="fab fa-node-js fa-3x"></i>
<p>Node js</p>
</div>
<div class="skills-logo">
<i class="fab fa-git-alt fa-3x"></i>
<p>Git</p>
</div>
<div class="skills-logo">
<i class="fas fa-cogs fa-3x"></i>
<p>Rest APIs</p>
</div>
<div class="skills-logo">
<i class="fas fa-universal-access fa-3x"></i>
<p>Web Accessibility</p>
</div>
<div class="skills-logo">
<i class="fas fa-mobile-alt fa-3x"></i>
<p>Responsive Design</p>
</div>
</div>
</div>
</section>
</body>
</html>
Just remove grid-template-rows: repeat(2, 100%); and it should fit everything.
Or keep it and change that 100% to almost anything else besides a % value if its necessary and it should work.
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 Have two sets of icons. 4 icons that i want on the left and 4 icons i want on the right on the same line at the bottom of the page just above the footer. my code is as follows
any help is much appreciated.
<div class="all">
<div class="symbols">
<i class="fab fa-cc-visa"></i>
<i class="fab fa-cc-paypal"></i>
<i class="fab fa-cc-mastercard"></i>
<i class="fab fa-cc-amex"></i>
</div>
<div class="social">
<i class="fab fa-linkedin-in"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook-square"></i>
</div>
</div>
CSS
div .symbols {
text-align: left;
font-size: 25px;
color:red;
}
div .social {
text-align: right;
font-size: 25px;
color:red;
}
all {
text-align: center;
display: inline;
}
div .symbols {
display:inile-block;
text-align: left;
font-size: 25px;
color:red;
}
div .social {
display:inile-block;
text-align: left;
font-size: 25px;
color:red;
}
<!DOCTYPE html>
<html>
<head><script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.row{
font-size:25px;
color:red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm" style="display:inline-block;float:left" >
<i class="fab fa-cc-visa"></i>
<i class="fab fa-cc-paypal"></i>
<i class="fab fa-cc-mastercard"></i>
<i class="fab fa-cc-amex"></i>
</div>
<div class="col-sm" style="display:inline-block;float:right">
<i class="fab fa-linkedin-in"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook-square"></i>
</div>
</div>
</div>
</body>
</html>
just add in the icon js file. also, use flex box
.all {
display:flex;
justify-content:space-between;
color:red;
}
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<div class="all">
<div class="symbols">
<div class="fab fa-cc-visa"></div>
<div class="fab fa-cc-paypal"></div>
<div class="fab fa-cc-mastercard"></div>
<div class="fab fa-cc-amex"></div>
</div>
<div class="socials">
<div class="fab fa-linkedin-in"></div>
<div class="fab fa-twitter-square"></div>
<div class="fab fa-instagram"></div>
<div class="fab fa-facebook-square"></div>
</div>
</div>
Thanks all for your input.
I changed my code for social and symbols within the css to
float:left instead of text-align:left.
once i did this the icons lined up and removed excess space aswell. problem solved
Thanks
I'm trying to copy a navbar design. This is the design I want:
And this is the navbar I'm getting:
And this is the figma link of the design: Link
I'm using flexbox and justify-content: space-between. But I'm getting extra spaces that i do not want. Other differences like icons doesn't matter i just need the basic copy of the ui and get rid of those spaces.
This is my code at the moment:
React Navbar.js:
const Navbar = () => {
return (
<nav className={styles.navbar}>
<div className={styles.logoWrapper}>
<img
src={require("../../img/logo.png")}
className={styles.logo}
alt="logo"
/>
</div>
<div className={styles.navLinks}>
<div className={styles.navItemWrapper}>
<i className="fas fa-rss fa-2x"></i>
<a href="#" className={styles.navItem}>
FEED
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-user-friends fa-2x"></i>
<a href="#" className={styles.navItem}>
NETWORK
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-suitcase fa-2x"></i>
<a href="#" className={styles.navItem}>
JOBS
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-comment-alt fa-2x"></i>
<a href="#" className={styles.navItem}>
CHAT
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-bell fa-2x"></i>
<a href="#" className={styles.navItem}>
NOTICES
</a>
</div>
</div>
<div className={styles.searchBarWrapper}>
<i className="fas fa-search fa-2x" style={{ color: "#0275B1" }}></i>
<input type="text" placeholder="Search" className={styles.searchBar} />
</div>
<div className={styles.profileOwner}>
<div className={styles.navAvatarWrapper}>
<img
src="https://unsplash.it/20/20"
alt="avatar"
className={styles.navAvatar}
/>
</div>
<div>
<div>
<h3 className={styles.navProfileName}>User Name</h3>
<span className={styles.navProfileNameSpan}>YOU</span>
</div>
<div>
<p className={styles.navProfileViewCount}>
367 views today<strong>+32</strong>
</p>
</div>
</div>
</div>
<div className={styles.navSubmenu}>
<i className="fas fa-ellipsis-h fa-lg"></i>
<h4 className={styles.navSubmenuTitle}>OTHER</h4>
</div>
</nav>
);
};
SCSS:
.navbar {
width: 100vw;
background: $white;
display: flex;
justify-content: space-between;
align-items: center;
color: $base-text-color;
font-size: $text-md;
line-height: 11px;
}
.navLinks {
display: flex;
justify-content: center;
align-items: center;
border-right: $gray-border;
text-align: center;
}
.logoWrapper {
border-right: $gray-border;
}
.logo {
width: 46px;
height: 46px;
margin: 17px 44px 17px 40px;
}
.navItemWrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 18px 20px;
}
.navItem {
text-decoration: none;
color: $base-text-color;
margin-top: 10px;
}
.searchBarWrapper {
border-right: $gray-border;
// width: 367px;
}
.searchBar {
border: none;
font-size: $text-lg;
font-weight: 300;
padding: 30px;
}
.profileOwner {
display: flex;
justify-content: space-between;
align-items: center;
}
.navAvatar {
width: 42px;
height: 42px;
border-radius: 50%;
margin: 15px;
}
.navProfileName {
display: inline-block;
padding: 10px;
}
.navProfileNameSpan {
font-weight: 300;
}
.navProfileViewCount {
font-weight: 300;
padding: 10px;
}
.navSubmenu {
text-align: center;
border-right: $gray-border;
border-left: $gray-border;
margin-right: 40px;
padding: 18px 23px;
}
.navSubmenuTitle {
margin-top: 21px;
}
Just put the logo div and the Feed , Network div in one container and give some margin-left , you should be good to go.
const Navbar = () => {
return (
<div className={styles.navLinks}>
<div className={styles.logoWrapper}>
<img
src={require("../../img/logo.png")}
className={styles.logo}
alt="logo"
/>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-rss fa-2x"></i>
<a href="#" className={styles.navItem}>
FEED
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-user-friends fa-2x"></i>
<a href="#" className={styles.navItem}>
NETWORK
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-suitcase fa-2x"></i>
<a href="#" className={styles.navItem}>
JOBS
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-comment-alt fa-2x"></i>
<a href="#" className={styles.navItem}>
CHAT
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-bell fa-2x"></i>
<a href="#" className={styles.navItem}>
NOTICES
</a>
</div>
</div>
<div className={styles.searchBarWrapper}>
<i className="fas fa-search fa-2x" style={{ color: "#0275B1" }}></i>
<input type="text" placeholder="Search" className={styles.searchBar} />
</div>
<div className={styles.profileOwner}>
<div className={styles.navAvatarWrapper}>
<img
src="https://unsplash.it/20/20"
alt="avatar"
className={styles.navAvatar}
/>
</div>
<div>
<div>
<h3 className={styles.navProfileName}>User Name</h3>
<span className={styles.navProfileNameSpan}>YOU</span>
</div>
<div>
<p className={styles.navProfileViewCount}>
367 views today<strong>+32</strong>
</p>
</div>
</div>
</div>
<div className={styles.navSubmenu}>
<i className="fas fa-ellipsis-h fa-lg"></i>
<h4 className={styles.navSubmenuTitle}>OTHER</h4>
</div>
</nav>
);
};
#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 -->