Seen a similar question but no answer for my specific problem before someone points me in that direction.
My icons from font awesome are displaying a scroll bar on Windows Chrome but not mac. Overflow hidden won't work or a webkit css style. Tried overflow hidden on specific class and all div's related.
* {
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#social-media {
padding-top: 50px;
}
#social-media-icons {
font-size: 50px;
text-align: center;
margin-top: 25px;
overflow: hidden;
}
.instagram-icon, .mixcloud-icon, .facebook-icon {
padding: 30px;
display: inline;
}
<div id="second-section">
<div id="social-media">
<h1 class="social-media-title">Social Media</h1>
<div id="social-media-icons">
<div class="instagram-icon">
<a href="https://www.instagram.com/area_808/" target="blank" class="instagram-link">
<i class="fab fa-instagram"></i>
</a>
</div>
<div class="mixcloud-icon">
<a href="https://www.mixcloud.com/Area808/" target="blank" class="mixcloud-link">
<i class="fab fa-mixcloud"></i>
</a>
</div>
<div class="facebook-icon">
<a href="" target="blank" class="facebook-link">
<i class="fab fa-facebook"></i>
</a>
</div>
</div>
</div
</div>
This is not a scrollbar BUT Because you are putting the icons inside <a> this little line is appearing and it's the default behavior for the <a> tag ( which is a { text-decoration: underline } ),
So simply just add a {text-decoration: none;}:
#social-media {
padding-top: 50px;
}
#social-media-icons {
font-size: 50px;
text-align: center;
margin-top: 25px;
overflow: hidden;
}
.instagram-icon, .mixcloud-icon, .facebook-icon {
padding: 30px;
display: inline;
}
a {
text-decoration: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div id="social-media">
<h1 class="social-media-title">Social Media</h1>
<div id="social-media-icons">
<div class="instagram-icon">
<a href="#" target="blank" class="instagram-link">
<i class="fab fa-instagram"></i>
</a>
</div>
<div class="mixcloud-icon">
<a href="#" target="blank" class="mixcloud-link">
<i class="fab fa-mixcloud"></i>
</a>
</div>
<div class="facebook-icon">
<a href="#" target="blank" class="facebook-link">
<i class="fab fa-facebook"></i>
</a>
</div>
</div>
</div>
Apply text-decoration: none; for all a tags.
This works nicely.
You are using overflow-x:hidden in the * style. Instead, place it in the body.
Related
I'm trying to align an image (a flag) with a text. Like in this footer:
I'm trying style="display:inline-block;" elements but the text and image go to far to the left:
Original footer: (Blue arrow indicates a gap)
Codepen
https://codepen.io/anon/pen/xNNrQW
Remove display:inline-block from 'footer_text_right' and wrap the name 'Peru' inside a span tag
CODEPEN
.padding-top3 {
padding-top: 3%;
}
.padding-bottom2 {
padding-top: 2%;
}
#footer-navbar {
background-color: #ededed;
}
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
/* this fix is needed for IE7- */
}
.footer_text {
font-size: 14px;
font-weight: bold;
letter-spacing: .2em;
padding: 0px;
margin: 0px;
}
.footer_nav_links {
margin-right: 2%;
}
.footer_icons {
font-size: 18px;
color: #bfbfbf;
}
.footer_icons:hover {
color: #707070;
}
.footer_ul {
width: 100%;
}
.margin-right3 {
margin-right: 3%;
}
/* new css */
.footer_text_right img {
min-width: 15px;
}
.footer_text_right span {
display: inline-block;
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="">
<div id="footer-navbar" class="footer_text">
<div class="container padding-top3 padding-bottom2">
<div class="row">
<div class="col-md-7">
<ul class="footer_ul">
<li class="footer_nav_links">
<a class="" href="/quienes_somos/">¿Quiénes somos?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/como_comprar/">¿Cómo comprar?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/contactanos/">Contáctanos</a>
</li>
</ul>
</div>
<div class="col-md-5">
<div class="margin-right15">
<p class="footer_text_right text-right"><img style="display:inline-block; align:center;vertical-align: middle;" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg"
width="5%" height="5%">
<span>Perú</span></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<ul class="footer_ul footer-links">
<li class="margin-right3"><i class="fab fa-twitter footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-instagram footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-facebook-square footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-youtube footer_icons"></i></i></li>
</ul>
</div>
<div class="col-md-5 text-right">
<div class="right margin-right15">
<span class="footer_text_right">© 2019 StickersGallito</span>
<a class="footer_text_right" href="/legal/privacy">Términos</a> & <a class="footer_text_right" href="/legal/terms">Condiciones</a>
</div>
</div>
</div>
</div>
</div>
<p class="footer_text_right text-right" style="display:inline-block;vertical-align: middle; float:right;"><img style="display:inline-block; align:center;vertical-align: middle;" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg" width="15%" height="15%"> Perú</p>
Try this it works !!
Take out the img from p element and remove the inline style -- you use bootsrap so all you have to do is to set row class to wrap div (wrap of the p and img)
.padding-top3 {
padding-top: 3%;
}
.padding-bottom2 {
padding-top: 2%;
}
#footer-navbar {
background-color: #ededed;
}
ul>li {
display: inline-block;
zoom: 1;
display: inline;
}
.footer_text {
font-size: 14px;
font-weight: bold;
letter-spacing: .2em;
padding: 0px;
margin: 0px;
}
.footer_nav_links {
margin-right: 2%;
}
.footer_icons {
font-size: 18px;
color: #bfbfbf;
}
.footer_icons:hover {
color: #707070;
}
.footer_ul {
width: 100%;
}
.margin-right3 {
margin-right: 3%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="">
<div id="footer-navbar" class="footer_text">
<div class="container padding-top3 padding-bottom2">
<div class="row">
<div class="col-md-7">
<ul class="footer_ul">
<li class="footer_nav_links">
<a class="" href="/quienes_somos/">¿Quiénes somos?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/como_comprar/">¿Cómo comprar?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/contactanos/">Contáctanos</a>
</li>
</ul>
</div>
<div class="col-md-5">
<div class="row">
<p class="footer_text_right text-right">Perú</p>
<img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg" width="5%" height="5%">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<ul class="footer_ul footer-links">
<li class="margin-right3"><i class="fab fa-twitter footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-instagram footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-facebook-square footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-youtube footer_icons"></i></li>
</ul>
</div>
<div class="col-md-5 text-right">
<div class="right margin-right15">
<span class="footer_text_right">© 2019 StickersGallito</span>
<a class="footer_text_right" href="/legal/privacy">Términos</a> & <a class="footer_text_right" href="/legal/terms">Condiciones</a>
</div>
</div>
</div>
</div>
</div>
Please do style like this
<p class="footer_text_right text-right " style="display:inline-block;vertical-align: middle; float:right">Perú</p>
<img style="display:inline-block; margin-top:2px; float:right; vertical-align:middle" src="https://images.pexels.com/photos/237018/pexels-photo-237018.jpeg?cs=srgb&dl=asphalt-beauty-colorful-237018.jpg&fm=jpg" width="5%" height="5%" />
I checked this code in your codepen and it works fine.In stacks code snippet,due to small space its not showing well.
Please try this :
<div class="margin-right15" style=" text-align:right;">
Add style with class="margin-right15", its working and align right side.
I am creating a horizontal navigation with an icon and text for each navigation item. I am running into an issue with items that contain two lines of text vs one.
I have tried modifying the padding and height of the div that extends higher than the others, but to no avail. How can I modify this to achieve a consistent height across all navigation items regardless of lines of text?
View the fiddle: Here
<div id="dashboard">
<a class="actions" href="#">
<div>
<i class="fas fa-users"></i> <br />Employees
</div>
</a>
<a class="actions" href="#">
<div>
<i class="fas fa-pencil-ruler"></i> <br />Check Stats
</div>
</a>
<a class="actions" href="#"">
<div>
<i class="fas fa-table"></i> <br />Generate Census
</div>
</a>
<a class="actions" href="#">
<div>
<i class="fas fa-paper-plane"></i> <br />Send Forms
</div>
</a>
<a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
<div>
<i class="fas fa-trash-alt"></i> <br />Delete
</div>
</a>
</div>
.actions:first-child div {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.actions:last-child div {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.actions > div {
display: block;
background-color: #fafafa;
color: #223a5c;
border: 1px solid #d6d8db;
padding: 15px 0;
margin: 0 -6px 20px 0;
width: 12.5%;
text-align: center;
display: inline-block;
}
.actions > div:hover {
background-color: #f2f2f2;
}
.actions > div i {
width: 1em;
font-size: 2em;
}
A flexbox solution might look something like this:
#dashboard {
display: flex;
}
div:first-child>.actions>div {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
div:last-child>.actions>div {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.actions>div {
background-color: #fafafa;
color: #223a5c;
border: 1px solid #d6d8db;
padding: 15px 15px;
text-align: center;
}
.actions>div:hover {
background-color: #f2f2f2;
}
.actions>div i {
width: 1em;
font-size: 2em;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="dashboard">
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-users"></i> <br />Employees
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-pencil-ruler"></i> <br />Check Stats
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-table"></i> <br />Generate Census
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-paper-plane"></i> <br />Send Forms
</div>
</a>
</div>
<div>
<a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
<div>
<i class="fas fa-trash-alt"></i> <br />Delete
</div>
</a>
</div>
</div>
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.
Here is my codepen: https://codepen.io/LastSoldi3r/pen/OmjGgR
HTML:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
<li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><i class="fa fa-info-circle" aria-hidden="true"></i> About</li>
<li><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i> Contact</li>
</ul>
<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
<a name="home">
<div class="row">
<div class="col-md-12">
<img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
<img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
</div>
</div>
</div>
<div class="container-fluid text" style="margin-left: 10%; padding: 1px 16px;">
<!--About Me-->
<a name="about">
<h2 align="center">About</h2><br>
<div class="row">
<div class="col-md-6">
<p id="aboutMe">I earned my Associates of Science for Information Technology in 2015. I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer. I am achieving this goal with the help of freeCodeCamp().</p>
<div class="col-md-12">
<h2 align="center">Skills</h2><br>
</div>
<div class="row">
<div class="col-md-3 skills">
<i class="fa fa-coffee"></i>
<p>JAVA</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-html5"></i>
<p>HTML5</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-css3"></i>
<p>CSS3</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-code"></i>
<p>JAVASCRIPT</p>
</div>
</div>
</div>
<div class="col-md-6">
<img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
</div>
</div>
<!--Portfolio-->
<br><br>
<a name="portfolio">
<div class="well background">
<h2 align="center">Portfolio</h2><br>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #011f4b !important;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #005b96;
color: white;
}
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}
#aboutMe {
font-size: 20px;
}
.code {
position: relative;
top: 0;
left: 0;
}
.nametag {
position: absolute;
top: 35px;
left: 60px;
}
.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}
.background {
background-color: #03396c !important;
}
I understand that you can change the css within bootstrap itself to change these effects. However, I am learning and seeing as I am new I just used the link provided on the bootstrap website instead of sifting through the css. If you look at my pen you will see that hovering over any text well darken it and underline some parts.
I have tried overriding the code in various ways.
My most recently tried, and most commonly found solution:
a.hover {text-decoration: none !important;}
This has not worked for me and I haven't been able to find any other working solution.
add this simple code to your css file :
html a:hover {
text-decoration: none !important;
}
here is how your page will shown :
html a:hover {
text-decoration: none !important;
}
body {
background-color: #011f4b !important;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #005b96;
color: white;
}
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}
#aboutMe {
font-size: 20px;
}
.code {
position: relative;
top: 0;
left: 0;
}
.nametag {
position: absolute;
top: 35px;
left: 60px;
}
.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}
.background {
background-color: #03396c !important;
}
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
<li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><i class="fa fa-info-circle" aria-hidden="true"></i> About</li>
<li><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i> Contact</li>
</ul>
<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
<a name="home">
<div class="row">
<div class="col-md-12">
<img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
<img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
</div>
</div>
</div>
<div class="container-fluid text" style="margin-left: 10%; padding: 1px 16px;">
<!--About Me-->
<a name="about">
<h2 align="center">About</h2><br>
<div class="row">
<div class="col-md-6">
<p id="aboutMe">I earned my Associates of Science for Information Technology in 2015. I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer. I am achieving this goal with the help of freeCodeCamp().</p>
<div class="col-md-12">
<h2 align="center">Skills</h2><br>
</div>
<div class="row">
<div class="col-md-3 skills">
<i class="fa fa-coffee"></i>
<p>JAVA</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-html5"></i>
<p>HTML5</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-css3"></i>
<p>CSS3</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-code"></i>
<p>JAVASCRIPT</p>
</div>
</div>
</div>
<div class="col-md-6">
<img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
</div>
</div>
<!--Portfolio-->
<br><br>
<a name="portfolio">
<div class="well background">
<h2 align="center">Portfolio</h2><br>
</div>
</div>
</body>
</html>
You were super close!
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
text-decoration: none;
}
Here is a forked example of what you are looking for:
https://codepen.io/anon/pen/NjaobY
I just added text-decoration: none to your existing CSS. https://codepen.io/anon/pen/Lyzqxp
Replace a.hover with a:hover and it should work.
.hover means "class named hover"
:hover means "when the element is hovered"
If you're using Chrome, the Developper Tools (right click -> inspect element) -or similar firebug features- will allow you to see what css is being rendered on any element.
you should override bootstrap style by "!important" please use this:
https://codepen.io/houtan/pen/mmBvop
I am trying to achieve a simple css border effect with proper padding. Trying to make it responsive without using bootstrap.
I just have one font and border around it and arrows between two div but I am not getting it
code:
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.work {
float: left;
border: 4px solid black;
padding: 10px 10px 10px 10px;
}
.work:before {
content: '\f178';
margin-top: 10px;
position: absolute;
right: -11px;
top: 44%;
}
<div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST1</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST2</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST3</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST4</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST5</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST6</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST7</h4>
</div>
</div>
link to codepen: https://codepen.io/rahulv/pen/BRwjEd
what I am trying to acheive is I dont get padding between two boxes also I want arrow between them .. its like test1 -> test2 -> test3..
You are missing the border style property which is required. Also you need position: relative; on .work to make the absolutely positioned psuedo element work, and the font-awesome font-family. Text-align: center for icons...
Check out full example:
.work{
position: relative;
float:left;
border: 4px solid black;
padding: 10px 10px 10px 10px;
text-align: center;
}
.work:not(:last-of-type) {
margin-right: 20px;
}
.work:not(:last-of-type):before {
content: '\f178';
font-family: "FontAwesome";
margin-top: 10px;
position: absolute;
right: -22px;
top: 41%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST1</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST2</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST3</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST4</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST5</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST6</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST7</h4>
</div>
</div>
You need to do following changes
.work:before {
content: '\f178';
margin-top: 0;
position: absolute;
right: -23px;
top: 50%;
transform: translateY(-50%);
font-family: 'FontAwesome';
}
and
.work:not(:last-of-type) {
margin-right: 20px;
}
Here is working final demo
http://codepen.io/sajiddesigner/pen/EmwKvj
To put the font awesome arrow outside of the right of the parent, use right: 0; to move it to the right side, then push it outside of the parent with translateX().
To have the puzzle piece right above the text, remove the margin (or just margin-top) from the text.
To have space between the boxes, you need a right margin.
.work {
float: left;
border: 4px solid black;
padding: 10px;
margin-right: 25px;
position: relative;
}
h4 {
margin: 0;
}
.work:before {
content: '\f178';
position: absolute;
transform: translateX(150%);
top: 50%; right: 0;
font-family: 'FontAwesome';
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST1</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST2</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST3</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST4</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST5</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST6</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST7</h4>
</div>
</div>
You need to specify the type of border
try using this:
border: 4px black solid;