This is my website:
How to convert it to like this one example below:
I have tried:
text-align: start;
but that doesn't seem to work,
Is this an HTML or CSS issue?
I already have text-alight: center in my code, but for some reason, it doesn't works, how to solve this issue?
This is my code:
CSS
/* sidebar starts here*/
.sidebar {
position: fixed;
top: 60px;
width: 260px;
height: calc(100% - 60px);
background: #df7f27;
overflow-x: hidden;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
width: 100%;
list-style: none;
}
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
align-items: center;
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
}
HTML
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div>Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-graduate"></i>
<div>Students</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
<div>Teachers</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<div>Employees</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-bar"></i>
<div>Analytics</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div>Earnings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div>Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div>Help</div>
</a>
</li>
</ul>
</div>
<div class="main"></div>
</div>
</body>
Thank you in advance, I really appreciate your help
Before anything first understand how the icons www.fontawesome.com works.
There's only one simple thing to understand that is:
That the < i > tag you used here is getting commented out and a svg is been loaded to your code above the tag
<i class="sidebar-icon fas fa-user-graduate"></i>
Solution
Just add these Properties to your html
Padding-left: 30px or as per your requirement;
Justify-content: flex-start;
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
padding-left: 30px;
justify-content: flex-start;
align-items: center
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
}
New Class to be Added for svg
Added a fixed width for svg.
Margin-right to align the test in the same line
.sidebar ul li a svg{
margin-right: 15px;
width: 25px !important;
}
Run this Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar{
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2{
color: #df7f27;
}
.search{
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user{
position: relative;
width: 50px;
height: 50px;
}
.user img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
/* sidebar starts here*/
.sidebar {
position: fixed;
top: 60px;
width: 260px;
height: calc(100% - 60px);
background: #df7f27;
overflow-x: hidden;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
width: 100%;
list-style: none;
display: flex;
justify-content: center;
}
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
padding-left: 30px;
justify-content: flex-start;
align-items: center
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
align-self: flex-start;
}
.sidebar ul li a svg{
margin-right: 15px;
width: 25px !important;
}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div>Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-graduate"></i>
<div>Students</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
<div>Teachers</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<div>Employees</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-bar"></i>
<div>Analytics</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div>Earnings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div>Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div>Help</div>
</a>
</li>
</ul>
</div>
<div class="main"></div>
</div>
</body>
</html>
You can try using flex box and then doing justify-content to be space-between or space-evenly
You should do two things:
Add a new class to every icon in your sidebar, for instance:
<i class="sidebar-icon fas fa-user-graduate"></i>
Style that class by adding horizontal margin. Adjust the pixels as you see fit.
.sidebar-icon {
width: 1.5em !important; /* Prevent uneven width of icons */
margin-left: 16px;
margin-right: 16px;
}
This is the result
i see your problem you just simply need to add some css justify-content:center; , you use display flex that;s why text-align is not working,
<!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">
<link rel="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<title>pomodone.app</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div>Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-graduate"></i>
<div>Students</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
<div>Teachers</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<div>Employees</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-bar"></i>
<div>Analytics</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div>Earnings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div>Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div>Help</div>
</a>
</li>
</ul>
</div>
<div class="main"></div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar{
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2{
color: #df7f27;
}
.search{
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user{
position: relative;
width: 50px;
height: 50px;
}
.user img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
/* sidebar starts here*/
.sidebar {
position: fixed;
top: 60px;
width: 260px;
height: calc(100% - 60px);
background: #df7f27;
overflow-x: hidden;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
width: 100%;
list-style: none;
text-align: center;
}
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
align-items: center;
/* my chnages here */
justify-content:center;
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
margin-right: 5px;
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
display: inline-block;
margin-right: 5px;
}
Checkout my code, Hope it will help you. :)
try to add float and margin to the icons
.sidebar ul li a i {
float:left;
margin:0 5px
}
.menuitem {
display: flex;
align-items: center;
justify-content: center;
}
change the div display to flex and try this.
please inform that I put menuitem to all the div class names.
Related
Before Bootstrap library:
After Bootstrap library:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body: body {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
}
sidebar: .sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 240px;
background: #11101d;
padding: 6px 14px;
transition: all 0.5s ease;
}
sidebar-active: .sidebar .active {
width: 240px;
}
sidebar ul li: .sidebar ul li {
position: relative;
height: 50px;
width: 100%;
margin: 0 5px;
list-style: none;
line-height: 50px;
}
input: .sidebar ul li input {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: 12px;
outline: none;
border: none;
background: #1d1b31;
padding-left: 50px;
font-size: 18px;
color: #fff;
}
search icon: .sidebar ul li .bx-search {
position: absolute;
z-index: 99;
color: #fff;
font-size: 22px;
}
ul li a: .sidebar ul li a {
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
}
ul li a hover: .sidebar ul li a:hover {
color: #11101d;
background: #fff;
}
}
ul li i: .sidebar ul li i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
<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>Sinema Yönetim | Personel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- <link rel="stylesheet" href="dashboardstyle.css"> -->
<!-- ADDED BY COMMUNITY -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="sidebar">
<div class="logo-content">
<div class="logo">
<i class="fa-solid fa-film"></i>
<div class="logo-name">Sinema</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search'></i>
<input type="text" placeholder="Arama yap..">
</li>
<li>
<a href="index.html">
<i class='bx bxs-grid'></i>
<span class="links_name">Anasayfa</span>
</a>
</li>
<li>
<a href="İzleyici.html">
<i class="fa-regular fa-user"></i>
<span class="links_name">İzleyici</span>
</a>
</li>
<li>
<a href="analiz.html">
<i class='bx bxs-bar-chart-alt-2'></i>
<span class="links_name">Analiz</span>
</a>
</li>
<li>
<a href="filmler.html">
<i class='bx bxs-film'></i>
<span class="links_name">Filmler</span>
</a>
</li>
<li>
<a href="bilet.html">
<i class="fa-solid fa-ticket"></i>
<span class="links_name">Bilet</span>
</a>
</li>
<li>
<a href="salon.html">
<i class='bx bx-chair'></i>
<span class="links_name">Salon</span>
</a>
</li>
</ul>
<div class="profile-content">
<div class="profile">
<div class="profile-details">
<img src="images/proflile.jpg" alt="">
<div class="name-job">
<div class="name">Aykuthan Kırcalı</div>
<div class="job">Personel şefi</div>
</div>
</div>
<i class='bx bx-log-in' id="log-out"></i>
</div>
</div>
</div>
<div class="home-content">
<div class="text">Sinema Salonu | Personel</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
When I add the bootstrap library to the html codes, the sidebar shifts to the right, how can I fix it?
i am developing my portfolio website but i came into an error can anyone just help me.
i need to make my social icons responsive.
Here The The Image For Desktop Version.
I need To make it responsive and direction to row for mobile version. Please Help Me.
As You Can See Here The Social Icons Are Not Responsive.
index.html
```
<!-- home -->
<section class="home bd-grid" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<div class="social">
<ul>
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</section>```
Styles.css
.home{
display: flex;
flex-wrap: wrap;
background: url("/img/banner.jpg") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: cover;
background-attachment: fixed;
font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
width: 100%;
display: flex;
}
.home .max-width .row{
margin-right: 0;
}
.home .home-content .text-1{
font-size: 27px;
}
.home .home-content .text-2{
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3{
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span{
color: #32de84;
font-weight: 500;
}
.home .home-content a{
display: inline-block;
background: #32de84;
color: #fff;
font-size: 25px;
padding: 12px 36px;
margin-top: 20px;
font-weight: 400;
border-radius: 6px;
border: 2px solid #32de84;
transition: all 0.3s ease;
}
.home .home-content a:hover{
color: #32de84;
background: none;
}
.social{
position: absolute;
top: 35%;
right: 5%;
color: #fff;
/* background-color: #ffffff; */
}
.social ul{
list-style: none;
}
.social li{
margin-bottom: 20px;
text-align: center;
}
.circle{
background-color: transparent;
border: 2px solid white;
border-radius: 200px;
height: 35px;
width: 35px;
}
.social i{
padding-top: 7px;
height: 30px;
width: 30px;
color: #ffffff;
}
#media (max-width: 947px) {
.home .home-content .text-2 {
font-size: 60px;
}
}```
Try thinking of your problem the other way around.
Layout shifts like this are much easier to deal with when working with a 'mobile first' approach. (style the mobile version and then override at a min-width media query to style the desktop version, rather than styling the desktop perfectly and then trying to fold everything down to mobile.)
I've knocked up a quick demo of what should work for you.
This is NOT a direct replication of or fix of your existing code, just a demo of the methods you could use, but hopefully from this demo and the snippets, you should understand what is happening and be able to apply some of these methods to your own code.
The method is entirely done with flex properties.
The socials are no longer absolutely positioned and the unnecessary social wrapper div is removed.
I've added border colors and padding just to more obviously show you whats happening to the box model when you resize your browser.
To view the demo, click 'run code snippet' - but make sure to then also click the 'full page' option otherwise it'd only show you the mobile layout.
Here's the JSFiddle where I created the demo incase it's useful: CLICK TO VIEW FIDDLE
.contentWrapper {
border: 1px solid pink;
padding: 10px;
}
.mainContent {
border: 1px solid blue;
padding: 10px;
}
.social {
border: 1px solid green;
padding: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
gap: 10px;
}
.circle {
background-color: red;
border: 2px solid white;
border-radius: 200px;
height: 35px;
width: 35px;
}
#media screen and (min-width: 948px) {
.myWrapper {
display: flex;
min-height: 100vh;
flex-direction: row;
}
.contentWrapper {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center
}
.mainContent {
width: calc(100% - 55px);
max-width: 1000px;
margin: 0 auto;
}
.social {
display: flex;
flex-direction: column;
justify-content: center;
}
.social ul {
display: flex;
flex: 0 0 55px;
flex-direction: column;
}
}
<section class="myWrapper">
<div class="contentWrapper">
<div class="mainContent">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<ul class="social">
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</section>
To make icons in row
we can do it using #media in the approach
APPROACH
Use flexbox to make your icons in a row
and use grid to make everything in a row when you are on a big screen
you can also set width and then add margin auto to make things centre but using justify-content center is better ---> not told in this answer
<!-- home -->
<section class="home bd-grid" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<div class="social">
<ul class="icons"> // give class icons to make it a flexbox
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</section>```
***css***
.icons{
display: flex;
flex-direction: column;
justify-content: center;
}
#media screen and (min-width: 800px //your mobile screen width) {
.icons {
display: flex;
justify-content:center;
}
.home{
display:grid;
width: 100vw;
gap: 20px;
text-align:center;
grid-template-column:2fr 2fr;
}
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How to vertically align an image inside a div
(37 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
How can I place my icons in the middle of the circle, based on the following picture:
Here is my HTML code:
<footer>
<div class="footer-bg-1">
<h1 class="display-5" style="color: white">Find Me on</h1><br>
<ul class="socialnetworks">
<li>
<a href="https://www.linkedin.com/" title="LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="https://github.com/" title="GitHub">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a href="https://twitter.com/" title="Twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
</div>
</footer>
Here is my CSS code that needs to be modified to place the icons in the middle of the white circles:
ul.socialnetworks {
margin: 0;
border:15px;
padding: 0;
width: 100%;
text-align: center;
}
ul.socialnetworks > li {
display: inline-block;
}
ul.socialnetworks > li > a {
display: inline-block;
font-size: 25px;
line-height: 50px;
width: 58px;
height: 58px;
border-radius: 36px;
background-color: #313132;
box-shadow: 0px 0px 2px white;
color: white;
margin: 0 4px 3px 0;
border: 8px solid;
}
You can try something like this:
.item{
border-radius:50%;
background-color:black;
border:15px solid white;
width:50px;
height:50px;
display:inline-flex;
}
body{
background-color:black;
}
.item i{
margin-top: 25%;
margin-left: 25%;
color:white;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="item">
<i class="material-icons">add_task</i>
</div>
<div class="item">
<i class="material-icons">add_task</i>
</div>
<div class="item">
<i class="material-icons">add_task</i>
</div>
Icons with class .fab have parameter display: inline-block. This means that vertical-align: middle can be used.
Just add it to your css:
.fab {
vertical-align: middle;
}
ul.socialnetworks {
margin: 0;
border:15px;
padding: 0;
width: 100%;
text-align: center;
}
ul.socialnetworks > li {
display: inline-block;
}
ul.socialnetworks > li > a {
display: inline-block;
font-size: 25px;
line-height: 50px;
width: 58px;
height: 58px;
border-radius: 36px;
background-color: #313132;
box-shadow: 0px 0px 2px white;
color: white;
margin: 0 4px 3px 0;
border: 8px solid;
}
.fab {
vertical-align: middle;
}
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<footer>
<div class="footer-bg-1">
<h1 class="display-5" style="color: white">Find Me on</h1><br>
<ul class="socialnetworks">
<li>
<a href="https://www.linkedin.com/" title="LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="https://github.com/" title="GitHub">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a href="https://twitter.com/" title="Twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
</div>
</footer>
set the line-height equal to height line-height: 58px;
ul.socialnetworks {
margin: 0;
border: 15px;
padding: 0;
width: 100%;
text-align: center;
}
ul.socialnetworks>li {
display: inline-block;
}
ul.socialnetworks>li>a {
display: inline-block;
font-size: 25px;
line-height: 58px;
width: 58px;
height: 58px;
border-radius: 36px;
background-color: #313132;
box-shadow: 0px 0px 2px white;
color: white;
margin: 0 4px 3px 0;
border: 8px solid;
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<footer>
<div class="footer-bg-1">
<h1 class="display-5" style="color: white">Find Me on</h1><br>
<ul class="socialnetworks">
<li>
<a href="https://www.linkedin.com/" title="LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="https://github.com/" title="GitHub">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a href="https://twitter.com/" title="Twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
</div>
</footer>
<body >
<div class="outer-container">
<div class="container">
<div class="header">
HOME
ABOUT
CONTACT
RESUME
</div>
<div class="big-heading">
<h2 style=color:white>
I'm Ankit Soni.
</h2>
</div>
<div class="social-media">
<a href="https://www.linkedin.com/in/ankit-soni-991495152/">
<i class="fa fa-linkedin"></i></a>
<a href="https://github.com/ankysony">
<i class="fa fa-github"></i></a>
<a href="mailto:ankit.soni.che16#iitbhu.ac.in">
<i class="fa fa-envelope"></i></a>
</div>
<div class="scrolldown">
<a href="">
<i class="fa fa-arrow-circle-down"></i>
</a>
</div>
</div>
</div>
</body>
I cannot find any type of mistake in it but my links in it are not working (no cursor pointer no redirects). Only the last one with arrow circle is working. The links under class social-media are not.
I got a part of css which is creating the error please see to it and suggest the possible way to fix error.
.outer-container .container .big-heading
{
height: 100%;
width: 100%;
display: flex;
font-size: 3em;
position: absolute;
align-items: center;
justify-content: center;
margin-top: -50px;
}
and the entire css code is below.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.outer-container
{
height: 792px;
width: 1440px;
}
h2{
font-family: sans-serif;
}
html {
background: url(../images/banner.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
.outer-container .container .header
{
text-align: center;
word-spacing: 100px;
padding-top: 10px;
}
.outer-container .container .header a
{
font-family: sans-serif;
text-decoration: none;
color: white;
}
.outer-container .container .big-heading
{
height: 100%;
width: 100%;
display: flex;
font-size: 3em;
position: absolute;
align-items: center;
justify-content: center;
margin-top: -50px;
}
.outer-container .container .social-media
{
height: 100%;
width: 100%;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.outer-container .container .social-media i
{
padding: 20px;
margin: 20px;
color: white;
text-shadow: 1px 1px 1px #ccc;
font-size: 30px;
}
.outer-container .container .scrolldown
{
height: 100%;
width: 100%;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
margin-top: 300px;
}
.outer-container .container .scrolldown i
{
padding: 20px;
margin: 20px;
color: white;
text-shadow: 1px 1px 1px #ccc;
font-size: 50px;
}
In the header class, your href is not redirecting you anywhere, because you only specified href="#", which neither points to another page nor points to any specific id on your page. You should add your url to to navigate to another page (or, in this case maybe an id on your own page):
href="www.site.com"
Also, it seems like in the social-media class, you did not specify any text for the link, which is why they aren't showing up.
You should put some text between the opening and closing tags:
link text
Cursor: pointer is showing and working fine in your code, to get font awesome work you need to include the library of font awesome.
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body >
<div class="outer-container">
<div class="container">
<div class="header">
HOME
ABOUT
CONTACT
RESUME
</div>
<div class="big-heading">
<h2 style=color:white>
I'm Ankit Soni.
</h2>
</div>
<div class="social-media">
<a target="_blank" href="https://www.linkedin.com/in/ankit-soni-991495152/">
<i class="fa fa-linkedin"></i></a>
<a target="_blank" href="https://github.com/ankysony">
<i class="fa fa-github"></i></a>
<a target="_blank" href="mailto:ankit.soni.che16#iitbhu.ac.in">
<i class="fa fa-envelope"></i></a>
</div>
<div class="scrolldown">
<a href="">
<i class="fa fa-arrow-circle-down"></i>
</a>
</div>
</div>
</div>
</body>
In my project I have footer with image as background.
I set it inside css. You can see it below. It looks nice only in big screen devices but ugly in mobile screen. How to make image responsive?
I don't have much experience in frontend and I would like to know what are the options?
I use bootstrap 4 by the way.
Here the link to jsfiddle.
/*
* START: Footer
*/
footer {
background: url('http://enjoyjumping.kz/static/img//footer.png') no-repeat;
background-size: 100% 100%;
width: 100%;
height: 500px;
bottom: 0;
position: absolute;
}
footer .row {
align-items: flex-end;
}
.flex-container {
display: flex;
flex-direction: column;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.social {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.social__button {
display: block;
width: 70px;
height: 70px;
border-radius: 100%;
border-color: #fff;
position: relative;
cursor: pointer;
margin: 5px;
text-align: center;
}
.social__button i {
display: inline-block;
position: absolute;
left: 0;
top: 0;
height: 70px;
line-height: 70px;
width: 70px;
font-size: 30px;
z-index: 2;
transition: 0.3s;
color: black;
border: 2px solid;
border-radius: 100%;
}
.social__button i:hover {
color: white;
}
.copyright {
margin-bottom: 2.1rem !important;
font-size: 18px;
font-weight: bold;
}
.menu-link {
color: black !important;
font-weight: bold;
}
.menu-link-li {
margin: 10px;
}
.footer-menu {
margin-bottom: 0.7rem !important;
}
/*
* END: Footer
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<footer>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm text-center footer-menu">
<ul class="list-unstyled">
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/about/">About Us</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" data-toggle="modal" data-target="#citiesModel" style="cursor: pointer;">Our clubs</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/coaches/">News</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/bonus/">Events</a>
</li>
</ul>
</div>
<div class="col-sm text-center">
<div class="flex-container">
<div class="w-100">
<div class="social">
<a href="#" class="social__button facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="social__button instagram">
<i class="fa fa-instagram"></i>
</a>
<a href="#" class="social__button vk">
<i class="fa fa-vk"></i>
</a>
<a href="#" class="social__button youtube">
<i class="fa fa-youtube-play"></i>
</a>
</div>
</div>
<div class="w-100">
<span>+7(701)</span><strong>262-47-50</strong>
</div>
</div>
</div>
<div class="col-sm text-center">
<p class="copyright">Copyright © 2018 example.com</p>
</div>
</div>
</div>
</footer>
You need to change the background-size and background-position attributes of <footer>:
footer {
background: url('http://enjoyjumping.kz/static/img/footer.png') no-repeat top center /cover;
}
See it working: https://jsfiddle.net/7mejchb8/11/
Edit, based on comments: See this example on how to keep footer glued to the bottom of the page on all devices, while allowing it to have a variable height, without using position:absolute: https://jsfiddle.net/websiter/d4n1sxop/
CSS behind it is:
body {
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
header {
flex-grow: 0;
}
main {
flex-grow: 1;
}
footer {
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 500px;
}