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
Related
I know this question might be asked so many times, but i couldn't find the one.
I want to put two h3 tag and 1 div containing 5 rating stars in one line, i don't know how to achieve that.
which css style can be added to achieve this?
Here is the code:
<h3>Shop Name</h3>
<div>
<i class="fa fa-star active"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<h3>64 Sales</h3>
Use a FlexBox
.row {
display: flex;
align-items: center;
}
h3 {
margin-left: 15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<h2>Shop Name</h2>
<div class='row'>
<div>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<h3>64 Sales</h3>
</div>
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.
#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>
This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 5 years ago.
I have a <div> with two <div>s in it, but the first <div> called facePlus has a margin when you hover over it in the inspector, and when you scroll down to the table it says it doesn't have it:
.facePlus {
width: 50%;
margin-right: 0%;
}
.twittIn {
width: 50%;
position: absolute;
left: 50%;
}
.socialMedia {
display: inline;
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>
how can I put them next to each other?
use flexbox
.socialMedia {
display: flex;
}
.socialMedia>div {
flex: 1
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>
Two approaches for you...
You can use the display property to place your divs side by side...
.facePlus {
width: 48%;
display: inline-block;
}
.twittIn {
width: 48%;
display: inline-block;
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>
Or you can use flexbox which you can read more about here:
.socialMedia {
display: flex;
}
.facePlus,
.twittIn {
flex: 1;
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>
I'm attempting to create a footer for my first page in Bootstrap and it looks fine except the contents should be centered vertically. After inspecting the elements in Chrome, it looks like the actual container element is about 50% the height of the parent footer element.
Now I was able to partially fix this by setting the "line-height" to match the "height" property of the footer, but when doing so, it caused part of the contents to appear well below the footer. What am I doing wrong and how can I fix this?
Without Line-Height:
With Line-Height:
<!-- Site footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>
Home | About Us | Contact
<br />
© Website 2016. All rights reserved.
</p>
</div>
<div class="col-sm-6">
<p class="muted pull-right">
<i id="social-fb" class="fa fa-facebook-square fa-2x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-2x social"></i>
<i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-2x social"></i>
</p>
</div>
</div>
</div>
</footer>
CSS
footer
{
height: 100px;
background:#fff;
margin-top:20px;
line-height: 100px;
}
You can use display:flex + align-items:center to achieve that.
footer
{
height: 100px;
background:#fff;
margin-top:20px;
display:flex;
align-items:center;
}
jsfiddle
Try adding padding-top and padding-bottom instead of line-height:
footer
{
height: 100px;
background:#fff;
padding: 2% 0;
}
You can use table properties for vertical alignment.
HTML:
<!-- Site footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>
Home | About Us | Contact
<br />
© Website 2016. All rights reserved.
</p>
</div>
<div class="col-sm-6">
<p class="muted pull-right">
<i id="social-fb" class="fa fa-facebook-square fa-2x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-2x social"></i>
<i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-2x social"></i>
</p>
</div>
</div>
</div>
</footer>
CSS:
footer {
background:#fff;
margin-top:20px;
}
footer p {
margin: 0;
}
footer .container .row {
display: table;
width: 100%;
height: 100px;
}
footer .container .row > div {
display: table-cell;
vertical-align: middle;
float: none;
}
Working example: https://jsfiddle.net/62shy0ob/1