I am working on the footer of a website in which I want to center the contents of it. Here is the fiddle for it. At this moment, if we check the fiddle the contents are not exactly centered.
The CSS codes which I have used in order to place the contents at the footer is:
.footer_fixed
{
background-color: #343a40;
color: #C0C0C0;
}
.contact_us
{
text-align: right;
}
.social_media_icons
{
text-align: left;
}
Problem Statement:
I am wondering what changes in the code I need to make in the fiddle in order to center the contents in the fiddle in the footer. This is what I have tried (display:flex, align-items:center) but somehow it didn't work.
.footer_fixed
{
background-color: #343a40;
color: #C0C0C0;
display: flex;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
justify-content: center;
}
Use justify-content-center for the row, and replace both of col-md-6 with col-md-auto.
<div class="row pt-2 pb-2 justify-content-center">
<div class="col-md-auto contact_us">
</div>
<div class="col-md-auto social_media_icons">
</div>
</div>
https://jsfiddle.net/c6a0873L/1/
Btw, using the follwoing properties are unnecessary because col-*-auto has as much width as its content.
.contact_us {
text-align: right;
}
.social_media_icons {
text-align: left;
}
Try this one
/*---------- Footer -----------*/
/*
.footer
{
background-color: #343a40;
background:url("../images/footer_background_full.jpg");
background-size: 100% auto;
margin-top:30px;
}
.footer_overlay
{
position: relative;
background-color: #212529;
height: 100%;
width: 100%;
opacity: 0.3;
}
*/
.footer
{
color: white;
padding-top: 44px;
background-color: rgb(243,243,243);
}
.footer a
{
color: rgb(138,138,138);
}
.footer a:hover
{
color:#fb875c
}
.footer .menu-items a
{
padding-bottom: 15px;
}
.appstore_soon_image_wrapper
{
max-width: 140px;
max-height: 50px;
}
.appstore_soon_image_wrapper img
{
width: 100%;
height: 50px;
object-fit: contain;
}
.footer_img
{
width:155px;
height:45px;
}
.back_to_top a
{
color: #ff8b5a;
}
.copyrights_wrapper
{
border-top: 1px solid #666;
}
.p_copyright
{
color: #C0C0C0;
}
ul.social-network {
list-style: none;
display: inline;
padding-left: 0;
padding-right: 0;
}
ul.social-network li {
display: inline;
/* margin: 0 3px; */
}
.social-circle li a {
display:inline-block;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
/*border: 1px solid #C0C0C0; */
text-align: center;
width: 30px;
height: 30px;
font-size: inherit;
background-color: transparent;
}
.social-circle li i {
margin:0;
/*line-height:30px;*/
line-height:25px;
text-align: center;
color: #C0C0C0;
}
/* color of social icons on hover */
.social-network a.icoFacebook:hover i,
.social-network a.icoTwitter:hover i,
.social-network a.icoLinkedin:hover i,
.social-network a.icoInstagram:hover i
{
color: #ff8b5a;
}
.social-network a:hover
{
border-color: #ff8b5a;
}
#media only screen and (min-width: 768px)
{
.appstore_1
{
display: block;
}
.appstore_2
{
display: none;
}
}
#media only screen and (max-width: 768px)
{
.appstore_1
{
display: none;
}
.appstore_2
{
display: block;
}
}
/*
.footer_head
{
color: white;
font-size: 2rem;
font-weight:400;
margin-top: 25px;
}
*/
.footer_fixed
{
background-color: #343a40;
color: #C0C0C0;
}
.contact_us
{
text-align: right;
}
.social_media_icons
{
text-align: left;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<div class="fixed-bottom footer_fixed">
<div class="row pt-2 pb-2">
<div class="col-md-12 text-center">
<i class="fas fa-phone pr-1"></i>
<a href="tel:+1234567890" class="pr-3">
+1 234 456 7890
</a>
<span class="static-email">
<i class="fas fa-envelope pl-3 pr-1"></i>
<a href="mailto:letsRuckify#Ruckify.com">
helloworld#world.com
</a>
</span>
<ul class="social-network social-circle">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-instagram"></i></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Just remove that col-md-6 bootstrap columns.As per your convenience adjust them using width on responsive view by applying media query. your code should be like this:
<!doctype html>
<html>
<head>
<style>
.contact_us, .social_media_icons, .email{
display:inline-block;
}
#media only screen and (max-width: 768px){
.contact_us, .social_media_icons, .email{
display:block;
width:100%;
}
}
</style>
</head>
<body>
<div class="fixed-bottom footer_fixed">
<div class="row pt-2 pb-2">
<div class="col-lg-12 col-md-12 text-center">
<div class="contact_us">
<i class="fas fa-phone pr-1"></i>
<a href="tel:+1234567890" class="pr-3">
+1 234 456 7890
</a>
</div>
<div class="email">
<span class="static-email">
<i class="fas fa-envelope pl-3 pr-1"></i>
<a href="mailto:letsRuckify#Ruckify.com">
helloworld#world.com
</a>
</span>
</div>
<div class="social_media_icons">
<ul class="social-network social-circle">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-instagram"></i></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Before, it was two column with 50% each. As you want both of them center, you need to move the ul inside the contact div & use full column width as col-12 or col-md-12 as you prefer.
& then adjust the .contact_us { text-align: center; }
/*---------- Footer -----------*/
.footer {
color: white;
padding-top: 44px;
background-color: rgb(243, 243, 243);
}
.footer a {
color: rgb(138, 138, 138);
}
.footer a:hover {
color: #fb875c
}
.footer .menu-items a {
padding-bottom: 15px;
}
.appstore_soon_image_wrapper {
max-width: 140px;
max-height: 50px;
}
.appstore_soon_image_wrapper img {
width: 100%;
height: 50px;
object-fit: contain;
}
.footer_img {
width: 155px;
height: 45px;
}
.back_to_top a {
color: #ff8b5a;
}
.copyrights_wrapper {
border-top: 1px solid #666;
}
.p_copyright {
color: #C0C0C0;
}
ul.social-network {
list-style: none;
display: inline;
padding-left: 0;
padding-right: 0;
}
ul.social-network li {
display: inline;
/* margin: 0 3px; */
}
.social-circle li a {
display: inline-block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
/*border: 1px solid #C0C0C0; */
text-align: center;
width: 30px;
font-size: inherit;
background-color: transparent;
}
.social-circle li i {
margin: 0;
/*line-height:30px;*/
line-height: 25px;
text-align: center;
color: #C0C0C0;
}
/* color of social icons on hover */
.social-network a.icoFacebook:hover i,
.social-network a.icoTwitter:hover i,
.social-network a.icoLinkedin:hover i,
.social-network a.icoInstagram:hover i {
color: #ff8b5a;
}
.social-network a:hover {
border-color: #ff8b5a;
}
#media only screen and (min-width: 768px) {
.appstore_1 {
display: block;
}
.appstore_2 {
display: none;
}
}
#media only screen and (max-width: 768px) {
.appstore_1 {
display: none;
}
.appstore_2 {
display: block;
}
}
.footer_fixed {
background-color: #343a40;
color: #C0C0C0;
}
.contact_us {
display: flex;
align-items: center;
justify-content: center;
}
.contact_us ul.social-network {
margin-bottom: 0px;
height: 30px;
display: flex;
align-items: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<div class="fixed-bottom footer_fixed">
<div class="row pt-2 pb-2">
<div class="col-12 contact_us">
<i class="fas fa-phone pr-1"></i>
<a href="tel:+1234567890" class="pr-3">
+1 234 456 7890
</a>
<span class="static-email">
<i class="fas fa-envelope pl-3 pr-1"></i>
<a href="mailto:letsRuckify#Ruckify.com">
helloworld#world.com
</a>
</span>
<ul class="social-network social-circle">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-instagram"></i></li>
</ul>
</div>
</div>
</div>
</body>
</html>
You can use class name of flex with bootstrap： https://getbootstrap.com/docs/4.1/utilities/flex/
You don't need to change your css and html structure, just add some class name:
<div class="fixed-bottom footer_fixed">
<div class="d-flex pt-2 pb-2 flex-wrap flex-md-nowrap justify-content-center">
<div class="px-3 d-flex flex-wrap justify-content-center">
<i class="fas fa-phone pr-1"></i>
<a href="tel:+1234567890" class="pr-3">
+1 234 456 7890
</a>
<span class="static-email">
<i class="fas fa-envelope pl-3 pr-1"></i>
<a href="mailto:letsRuckify#Ruckify.com">
helloworld#world.com
</a>
</span>
</div>
<div class="px-3 social_media_icons">
<ul class="social-network social-circle">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-instagram"></i></li>
</ul>
</div>
</div>
</div>
Related
Working on making my website. I'm sure this is an easy fix but I'm so stuck!
I am trying to vertically center the copyright info on the right, then the social icons on the left. But they appear to be stacked then aligned left and right.
Here's what that looks like
Please forgive the dumb question. Very new to all this, and I've done as much troubleshooting as I can. I'm hoping is a "duh" answer!
I have a footer in my index which reads like this:
#main-footer {
padding: center;
background: darken($primary-color, 10);
color: set-text-colour($primary-color);
height: 60px;
.footer_text {
text-align: right;
font-size: 17px;
}
.footer_icons {
margin-left: 5%;
text-align: center;
display: block;
width: 100px;
padding: 4px;
a {
align: left;
&:hover {
color: $secondary-color;
#include easeOut;
}
}
}
}
<footer id="main-footer">
<div class="footer_text">Copyright © 2018</div>
<div class="footer_icons">
<a href="https://www.instagram.com/beellllaa/">
<i class="fab fa-instagram fa-2x"></i>
</a>
<a href="https://www.linkedin.com/in/beellllaa/">
<i class="fab fa-linkedin fa-2x"></i>
</a>
<a href="https://www.vimeo.com/beellllaa/">
<i class="fab fa-vimeo fa-2x"></i>
</a>
</div>
</footer>
I was unable to directly use your code via codepen, so I mocked up something quick. You could quickly center vertically by using flexbox. This might require though that you use some prefixes as well. Can check it out here:
https://codepen.io/pen/?editors=1100
#main-footer {
background-color: teal;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.social {
display: flex;
}
.footer-icons {
background-color: red;
height: 10px;
width: 10px;
margin: 5px;
padding: 5px;
}
<footer id="main-footer">
<div>Copyright © 2018</div>
<div class="social">
<div class="footer-icons"></div>
<div class="footer-icons"></div>
<div class="footer-icons"></div>
</div>
</footer>
I would recommend the following:
Readjust your HTML so that your .footer_text div comes after the .footer_icons div.
Add the following lines of CSS to your #main_footer div.
display: flex;
align-items: center;
justify-content: space-between;
See the code snippet below or this codepen:
#main-footer {
padding: center;
background: darken($primary-color, 10);
color: set-text-colour($primary-color);
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
.footer_text {
text-align: right;
font-size: 17px;
}
.footer_icons {
margin-left: 5%;
text-align: center;
display: block;
width: 100px;
padding: 4px;
a {
align: left;
&:hover {
color: $secondary-color;
#include easeOut;
}
}
}
}
<footer id="main-footer">
<div class="footer_icons">
<a href="https://www.instagram.com/beellllaa/">
<i class="fab fa-instagram fa-2x">IG</i>
</a>
<a href="https://www.linkedin.com/in/beellllaa/">
<i class="fab fa-linkedin fa-2x">LI</i>
</a>
<a href="https://www.vimeo.com/beellllaa/">
<i class="fab fa-vimeo fa-2x">VI</i>
</a>
</div>
<div class="footer_text">Copyright © 2018</div>
</footer>
$primary-color:white;
$secondary-color:white;
#main-footer {
padding: center;
background: darken($primary-color, 10);
color: set-text-colour($primary-color);
height: 60px;
line-height: 60px;
.footer_text {
font-size: 17px;
line-height:60px;
float: right;
}
.footer_icons {
margin-left: 5%;
text-align: center;
display: inline-block;
width: 150px;
padding: 4px;
a {
align: left;
padding-right:10px;
&:hover {
color: $secondary-color;
}
}
}
}
i{
font-family:'FontAwesome';
}
<footer id="main-footer">
<div class="footer_icons">
<a href="https://www.instagram.com/beellllaa/">
<i class="fa fa-instagram fa-2x"></i>
</a>
<a href="https://www.linkedin.com/in/beellllaa/">
<i class="fa fa-linkedin fa-2x"></i>
</a>
<a href="https://www.vimeo.com/beellllaa/">
<i class="fa fa-vimeo fa-2x"></i>
</a>
</div>
<div class="footer_text">Copyright © 2018</div>
</footer>
This should work. .footer_text{float:right;line-height:60px;} .footer_icons{display:inline-block;}
Codepen Link : https://codepen.io/mk_dev/pen/KxbyJp
I have been looking at suggestions on how to make two divs on the same line for the past hour, but they either do not work or only work for divs with text. I am making a navigation bar for my website that contains my site logo and icons that jump to sections of my website, but I cannot get them to be on the same line.
I just want the icons (in the blue container) to be shifted up and right next to my logo. If anybody could tell me specifically what I can do to fix this, it would be greatly appreciated.
Also, I am using Bootstrap 4 if that makes any difference in solving this problem.
My navigation bar currently:
What I want the navigation bar to look like:
My Navbar HTML:
<div class="d-block d-xs-block d-md-none" id="topnav">
<div id="topnav-logo">
<img src="images/logo.png" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>
My Navbar CSS (you can ignore the comments as they are just from me trying to fix this issue):
#topnav {
/* TODO: change height back to 60px when done fixing*/
height: 120px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
overflow: auto;
}
#topnav-icons {
margin-left: 60px;
width: calc(100vw - 60px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
}
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
padding: 10px;
}
Flexbox - You literally can just change d-block to d-flex on id="topnav" and it will be just about right:
Change <div class="d-block d-xs-block d-md-none" id="topnav"> to <div class="d-flex d-md-none" id="topnav">
I also removed the d-xs-block which is not needed.
I believe you can remove the height: 120px from #topnav since the height would be driven by the items themselves and you'll probably want to remove margin-left: 60px; on #topnav-icons. I've made these changes in the snippet below.
#topnav {
/* TODO: change height back to 60px when done fixing*/
/* height: 120px; */
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
overflow: auto;
}
#topnav-icons {
/* margin-left: 60px; */
width: calc(100vw - 60px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
}
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
padding: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="d-flex d-md-none" id="topnav">
<div id="topnav-logo">
<img src="http://pluspng.com/img-png/bootstrap-logo-vector-png-bootstrap-logo-512.jpg" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>
I'm not sure if it does what you want but adding float:left on your image might be the trick.
See this jsfiddle
<div class="d-block d-xs-block d-md-none" id="topnav">
<div id="topnav-logo">
<img src="images/logo.png" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>
And CSS
#topnav {
/* TODO: change height back to 60px when done fixing*/
height: 120px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
}
#topnav-icons {
margin-left: 60px;
width: calc(100vw - 60px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
}
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
float:left;
}
it should be like this :
#topnav {
/* TODO: change height back to 60px when done fixing*/
height: 120px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
overflow: auto;
}
#topnav-icons {
width: calc(100% - 80px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
float: left;
}
#topnav-logo { float: left; }
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
padding: 10px;
}
<div class="d-block d-xs-block d-md-none" id="topnav">
<div id="topnav-logo">
<img src="images/logo.png" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>
Just doing some practice by recreating the tumblr website, Im having some issues with the right side where it says "Recommended Blogs". I want to implement the use of a small user icon logo instead of the list style bullet. Is it possible to resize the images in css? or would i have to resize the image in photoshop?
Take a look at My Code pen
HTML
<html>
<head>
<title>Tumblr</title>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" type="text/css" href="tumblrstyle.css">
</head>
<body>
<!-- Header Navigation -->
<div class="top-head">
<header>
<div id="top-head-left">
<h1>T</h1>
<input type="text" name="" placeholder="">
<i class="fas fa-search"></i>
</div>
<div id="top-head-right">
<i class="fas fa-home fa-2x"></i>
<i class="far fa-compass fa-2x"></i>
<i class="fas fa-envelope fa-2x"></i>
<i class="far fa-comment fa-2x"></i>
<i class="fas fa-bolt fa-2x"></i>
<i class="fas fa-user fa-2x"></i>
</div>
</header>
</div>
<!-- End Header -->
<!-- RightBar -->
<div class="container">
<div class="right-side">
<div class="right-side nav">
<h3>Recommended Blogs</h3>
<ul id="navi">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
</div>
<div class="radar">
<h3>radar</h3>
<ul>
<li>empty</li>
<p>
</p>
</ul>
</div>
</div>
<!-- Post Controls -->
<div class="controller">
<img src="https://image.freepik.com/free-vector/abstract-summer-sun-logo- design_1436-184.jpg">
<div class="post-group">
<div class="icons">
<i class="fas fa-home fa-5x"></i>
</div>
<div class="icons">
<i class="far fa-compass fa-5x"></i>
</div>
<div class="icons">
<i class="fas fa-envelope fa-5x"></i>
</div>
<div class="icons">
<i class="far fa-comment fa-5x"></i>
</div>
<div class="icons">
<i class="fas fa-bolt fa-5x"></i>
</div>
<div class="icons">
<i class="fas fa-user fa-5x"></i>
</div>
</div>
</div>
</body>
</html>
CSS
/*Reset*/
* {
margin: 0;
padding: 0;
}
body {
background: lightgray;
}
header {
padding: 0 10px;
}
header h1 {
display: inline;
margin-right: 15px;
}
.container {
width: 60%;
margin: auto;
overflow: visible;
}
div h3 {
border-bottom: 1px solid black;
}
/*Header*/
.top-head {
background: lightblue;
height: 60px;
border-bottom: 5px solid black;
padding: 0px 20px;
}
#top-head-left {
float: left;
padding-top: 5px;
}
#top-head-left input[type="text"] {
width: 200px;
background: yellow;
padding: 5px 0px;
}
#top-head-right {
float: right;
padding-top: 12px;
}
/*RightsideBar*/
.right-side {
float: right;
}
.nav ul {
list-style-image: url('https://78.media.tumblr.com/avatar_0f16d6a6a019_128.pnj');
}
.nav ul li {
}
.radar ul {
list-style: none;
}
/*Post Controller*/
.controller {
margin-top: 50px;
}
.controller img {
width: 10%;
float: left;
margin-right: 20px;
border-radius: 10px;
}
.post-group {
float: left;
background: white;
height: 68px;
border-radius: 10px;
padding-top: 8px;
padding-bottom: 22px;
}
.icons {
float: left;
}
.icons a {
color: orange;
padding: 0 12px;
}
/* https://78.media.tumblr.com/avatar_3aed9115be2f_128.pnj
https://78.media.tumblr.com/avatar_0f16d6a6a019_128.pnj
https://78.media.tumblr.com/avatar_0f16d6a6a019_128.pnj
https://78.media.tumblr.com/avatar_996dede0302e_128.pnj */
#navi {
list-style-type: none;
}
#navi > li::before {
content: '';
display: inline-block;
height: 40px;
width: 40px;
background-size: 40px;
background-image: url('https://78.media.tumblr.com/avatar_0f16d6a6a019_128.pnj');
background-repeat: no-repeat;
margin-right: 10px;
background-position: center center;
vertical-align: middle;
}
Please don't mind my selectors
I created this small icon menu with the help of a tutorial and I am trying to make it responsive, but it is not working.
When the width is 400px I want the menu to be vertical.
body {
margin: 0px;
}
.cuadro {
width: 100%;
background-color: pink;
overflow: auto;
}
.cuadro a {
float: left;
text-align: center;
width: 20%;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.cuadro a:hover {
background-color: green;
}
.active {
background-color: purple !important;
}
#media only screen and (max-width: 414px) {
body {
margin: 0px;
}
.cuadro {
position: fixed;
width: 414px;
text-align: center;
color: white;
font-size: 36px
}
.cuadro a {
background-color: pink;
display: block;
padding: 16px;
color: white;
}
.cuadro a:hover {
transition: all 0.3s ease;
background-color: green;
}
.active {
background-color: purple !important;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta content="viewport" content="width=device-width initial-scale=1">
<script src="https://use.fontawesome.com/ea180863a6.js"></script>
</head>
<body>
<div class="cuadro">
<a class="active" href="#"><i class="fa fa-skype" aria-hidden="true"></i></a>
<i class="fa fa-spotify" aria-hidden="true"></i>
<i class="fa fa-snapchat-ghost" aria-hidden="true"></i>
<i class="fa fa-whatsapp" aria-hidden="true"></i>
<i class="fa fa-vk" aria-hidden="true"></i>
</div>
</body>
</html>
What am I doing wrong?
You are almost good, simply make the menu item float:none and width:100% in the media query. You may also add box-sizing:border-box to avoid having overflow issue and you don't need to specify a width for .cuadro inside the media query :
body {
margin: 0px;
}
.cuadro {
width: 100%;
background-color: pink;
overflow: auto;
}
.cuadro a {
float: left;
text-align: center;
width: 20%;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
box-sizing:border-box;
}
.cuadro a:hover {
background-color: green;
}
.active {
background-color: purple !important;
}
#media all and (max-width: 414px) {
.cuadro {
position: fixed;
width: 100%;
text-align: center;
color: white;
font-size: 36px
}
.cuadro a {
background-color: pink;
display: block;
width:100%;
padding: 16px;
color: white;
float:none;
}
.cuadro a:hover {
transition: all 0.3s ease;
background-color: green;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta content="viewport" content="width=device-width initial-scale=1">
<script src="https://use.fontawesome.com/ea180863a6.js"></script>
<style>
</style>
</head>
<body>
<div class="cuadro">
<a class="active" href="#"><i class="fa fa-skype" aria-hidden="true"></i></a>
<i class="fa fa-spotify" aria-hidden="true"></i>
<i class="fa fa-snapchat-ghost" aria-hidden="true"></i>
<i class="fa fa-whatsapp" aria-hidden="true"></i>
<i class="fa fa-vk" aria-hidden="true"></i>
</div>
</body>
</html>
There is a lot of repetition in your CSS. There's no need to declare rules twice.
An alternative to float is to use flexbox. Note that you only need to change the direction of the container for smaller screens.
Good introduction to flexbox
example
I've removed / changed a few styles.. let me know if you have questions.
body {
margin: 0;
}
.cuadro {
background-color: pink;
display: flex;
}
.cuadro a {
text-align: center;
flex: 1 0 20%;
transition: all 0.3s ease;
color: white;
font-size: 36px;
padding: 12px 0;
}
.cuadro a:not(.active):hover {
background-color: green;
}
.active {
background-color: purple;
}
#media only screen and (max-width: 414px) {
.cuadro {
flex-direction: column;
justify-content: center;
}
}
<script src="https://use.fontawesome.com/ea180863a6.js"></script>
<div class="cuadro">
<a class="active" href="#"><i class="fa fa-skype" aria-hidden="true"></i></a>
<i class="fa fa-spotify" aria-hidden="true"></i>
<i class="fa fa-snapchat-ghost" aria-hidden="true"></i>
<i class="fa fa-whatsapp" aria-hidden="true"></i>
<i class="fa fa-vk" aria-hidden="true"></i>
</div>
I am trying a make a toolbar using font awesome with a few icons and search text box at the start.
I would like this to be ideally aligned in a way that it has search on the left most followed by the icons to its right.
.icon-bar {
width: 40%;
text-align: center;
background-color: #555;
overflow: auto;
display:flex;
}
.icon-bar a {
width: 15%;
padding: 12px 0;
float: left;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<div class="icon-bar">
<input id="searchInput" type="text" placeholder="Search" /><i id="filtersubmit" class="fa fa-search"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
<i class="fa fa-trash"></i>
<a class="active" href="#"><i class="fa fa-home"></i></a>
</div>
</div>
Ideally I would like to be aligned like this image below:
Changes as per the solution below:
Menu with full browser screen:
Now when I minimize the browser the scroll comes which is because of overflow:auto.
Is their a way I can control the width of the search box for the icons I think changing the fontsize does the trick.
Add display flex to the .icon-bar div.
.icon-bar {
width: 30%;
text-align: center;
background-color: #555;
overflow: auto;
display:flex;
}
Also, as dipas noted remove that position left.
It is easier using inline-blocks:
.icon-bar {
text-align: center;
background-color: #555;
overflow: auto;
}
.icon-bar a {
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
#filtersubmit {
color: #7B7B7B;
cursor: pointer;
}
.icon-bar > * {
display: inline-block;
vertical-align: middle;
padding: 10px;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div>
<div class="icon-bar">
<input id="searchInput" type="text" placeholder="Search" /><i id="filtersubmit" class="fa fa-search"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
<i class="fa fa-trash"></i>
<a class="active" href="#"><i class="fa fa-home"></i></a>
</div>
</div>
You can use flexboxes too:
.icon-bar {
text-align: center;
background-color: #555;
overflow: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
width: 60%;
}
.icon-bar a {
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
#filtersubmit {
color: #7B7B7B;
cursor: pointer;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div>
<div class="icon-bar">
<input id="searchInput" type="text" placeholder="Search" /><i id="filtersubmit" class="fa fa-search"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
<i class="fa fa-trash"></i>
<a class="active" href="#"><i class="fa fa-home"></i></a>
</div>
</div>
Use display: table on parent .icon-bar and display: table-cell on children groups .search-bar and .button-wrapper
.icon-bar {
display: table;
padding: 0 20px;
background-color: #555;
overflow: auto;
}
.search-bar, .button-wrapper {
display: table-cell;
vertical-align: middle;
}
#filtersubmit {
color: #7B7B7B;
cursor: pointer;
}
.button-wrapper a {
display: inline-block;
padding: 12px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.button-wrapper a:hover {
background-color: #000;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<div class="icon-bar">
<div class="search-bar">
<input id="searchInput" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
</div>
<div class="button-wrapper">
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
<i class="fa fa-trash"></i>
<a class="active" href="#"><i class="fa fa-home"></i></a>
</div>
</div>
</div>