This is my problem,
I have a website with some content, and i want the header to be 100% width of the browser, and some content that's wrapped inside wrapper to make it about.. 50% of the browser width.
Then we have something like this:
But, we're adding a menu aswell. This is done with UL, and we cant just add the menu (i think), because the content of the menu is going to be in the wrapper. So it looks like this:
What have i tried?
I've given the element header/menu this css:
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
I also added overflow-x:hidden; on the body element so they cant scroll x wise. But on their phones, they can. So this makes everything "unresponsive"
HTML:
<html>
<title>Rocket League Prices - Home</title>
<body>
<div class="wrapper">
<header>
<a href="/index.php">
<div class="header-1">
Rocket League Prices
</div>
</a>
</header>
<ul class="nav-top">
<li class="nav-top"><a href="/index.php" title="HOME" class="nav-top">
<i class="fa fa-home fa-lg" aria-hidden="true" ></i><br><span class="meny-text">Home</span></a></li>
<li class="nav-top"><a href="/pc.php" title="PC PRICE LIST" class="nav-top">
<i class="fa fa-desktop fa-lg" aria-hidden="true"></i><br><span class="meny-text">PC list</span></a></li>
<li class="nav-top"><a href="/ps4.php" title="PS4 PRICE LIST" class="nav-top">
<i class="fa fa-gamepad fa-lg" aria-hidden="true"></i><br><span class="meny-text">PS4 list</span></a></li>
<li class="nav-top"><a href="/certified.php" title="CERTIFIED LIST" class="nav-top">
<i class="fa fa-certificate" aria-hidden="true"></i><br><span class="meny-text">Certified list</span></a></li>
<li class="nav-top" style="float:right;!important" >
<a href="#" class="nav-top meny-text" data-toggle="modal" data- target="#modal-staff">
<i class="fa fa-envelope-o" aria-hidden="true"></i> <br>Staff</a></li>
</ul>
<div class="modal fade" id="modal-staff" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
CSS:
body{
overflow-x: hidden;
}
header{
padding: 20px;
background-color: #1798e5;
color: black;
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
ul.nav-top {
background-color: white;
margin-left: auto;
margin-right: auto;
padding: 0;
margin-top: 0 auto;
float:left;
color: #34495e;
display:table-row;
text-align: center;
width: 100%;
margin: 0;
margin-bottom: 15px;
list-style-type: none;
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
li a.nav-top{
color: #34495e;
text-decoration: none;
padding: 20px 20px;
}
li a.nav-top:hover{
background-color: #f1f2f3;
color: #1798e5;
}
li.nav-top {
text-decoration: none;
float: left;
}
.wrapper{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
CODEPEN: http://codepen.io/anon/pen/QdLpzM
Your html has to change a bit.
<html>
<title>Rocket League Prices - Home</title>
<body>
<header>
<div class="column">
<a href="/index.php">
<div class="header-1">
Rocket League Prices
</div>
</a>
</div>
</header>
<div class="column">
<ul class="nav-top ">
<li class="nav-top">
<a href="/index.php" title="HOME" class="nav-top">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
<br><span class="meny-text">Home</span>
</a>
</li>
<li class="nav-top">
<a href="/pc.php" title="PC PRICE LIST" class="nav-top">
<i class="fa fa-desktop fa-lg" aria-hidden="true"></i>
<br><span class="meny-text">PC list</span>
</a>
</li>
<li class="nav-top">
<a href="/ps4.php" title="PS4 PRICE LIST" class="nav-top">
<i class="fa fa-gamepad fa-lg" aria-hidden="true"></i>
<br><span class="meny-text">PS4 list</span>
</a>
</li>
<li class="nav-top">
<a href="/certified.php" title="CERTIFIED LIST" class="nav-top">
<i class="fa fa-certificate" aria-hidden="true"></i>
<br><span class="meny-text">Certified list</span>
</a>
</li>
<li class="nav-top" style="float:right;!important">
<a href="#" class="nav-top meny-text" data-toggle="modal" data-target="#modal-staff">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<br>Staff</a>
</li>
</ul>
</div>
</body>
and your css
.column {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
header {
padding: 20px 0;
background-color: #1798e5;
color: black;
width: 100%;
display: block;
}
ul.nav-top {
background-color: white;
padding: 0;
float: left;
color: #34495e;
display: table-row;
text-align: center;
width: 100%;
margin: 0;
margin-bottom: 15px;
list-style-type: none;
}
li a.nav-top {
color: #34495e;
text-decoration: none;
padding: 20px 20px;
}
li a.nav-top:hover {
background-color: #f1f2f3;
color: #1798e5;
}
li.nav-top {
text-decoration: none;
float: left;
}
Related
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.
I am completely new to website designing and have been trying to make a e commerce website from scratch,
here in my website's products page the footer doesn't span the whole width. can somebody help me with this. The css and html are divided by a line of asterisks im actually new to stack overflow
i've tried searching in w3 schools and many youtube tutorials but all effort is in vain.
please guide me.
thanks in advance (^-^)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grocery guys</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="logo.png" width="125px">
</div>
<nav>
<ul id="Menuitems">
<li>Home </li>
<li>Products </li>
<li>About </li>
<li>Contact </li>
<li>Account </li>
</ul>
</nav>
<img src="cart.png" width="30px" height="30px">
<img src="menu.png" class="menu-icon" onclick="menutoggle()" >
</div>
</div>
</div>
<!--------featured products-------->
<div class="small-container">
<h2 class="title">Featured products</h2>
<div class="row">
<div class="col-4">
<img src="product-1.jpg" alt="">
<h4>Curology moisturiser </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-2.jpg" alt="">
<h4>Beemster cheese wheel </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-3.jpg" alt="">
<h4>Aqua panna </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-4.jpg" alt="">
<h4>Orignal's beer light </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
</div>
<!------footer----->
<div class="footer">
<div class="container">
<div class="row">
<div class="footer-col-1">
<h3>Reach us at Whatsapp <span>©</span</h3>
</div>
<div class="footer-col-2">
<img src="logo-white.png" alt="">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi, eos.</p>
</div>
<div class="footer-col-3">
<h3>Useful links</h3>
<ul>
<li>Coupons</li>
<li>Blog post</li>
<li>Return policy</li>
<li>Affiliate</li>
</ul>
</div>
<div class="footer-col-3">
<h3>Follow us</h3>
<ul>
<li>Whatsapp</li>
<li>Maps</li>
<li>Business card</li>
<li>Contact</li>
</ul>
</div>
</div>
<hr>
<p class="Copyright">Copyright 2021 <span>©</span> - Haneesh kenny - <i>made with love and a wierd sense of humour.</i></p>
</div>
</div>
<!--js for toggle menu-->
<script>
var Menuitems = document.getElementById("Menuitems")
Menuitems.style.maxHeight = "0px";
function menutoggle(){
if(Menuitems.style.maxHeight == "0px")
{
Menuitems.style.maxHeight = "200px";
}
else
{
Menuitems.style.maxHeight = "0px"
}
}
</script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.navbar{
display: flex;
align-items: center;
padding: 20px;
}
nav{
flex: 1;
text-align: right;
}
nav ul{
display: inline-block;
list-style-type: none;
}
nav ul li{
display: inline-block;
margin-right: 20px;
}
a{
text-decoration: none
cornflowerblue
}
p{
color: cornflowerblue;
}
.container{
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.col-2{
flex-basis: 50%;
min-width: 300px;
}
.col-2 img{
max-width: 100%;
padding: 50px 0;
}
.col-2 h1{
font-size: 50px;
line-height: 60px;
margin: 25px 0;
}
.btn{
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.header{
background: radial-gradient(#fff,#e4ffd3);
}
.header .row{
margin-top: 70px;
}
.btn:hover{
background: #563434;
}
.categories{
margin: 70px 0;
}
.col-3{
flex-basis: 30%;
min-width: 250px;
margin-bottom: 30px;
}
.col-3 img{
width: 100%;
}
.small-container{
max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.col-4{
flex-basis: 25%;
padding: 30px;
min-width: 200px;
margin-bottom: 50px;
transition: transform 0.5s;
}
.col-4 img{
width: 100%;
}
.title{
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after{
content: '';
background: #00ff22;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 46%;
transition: translateX(-50%);
}
.h4{
color: #555;
font-weight: normal;
}
.col-4 p{
font-size: 14px;
}
.rating .fa{
color: #ff523b;
}
.col-4:hover{
transform: translateY(-10px);
box-shadow: 8px 6px 34px grey;
}
/*-----offer------*/
.offer{
background: radial-gradient(#fff,#e4ffd3);
margin-top: 90px;
padding: 30px 0;
}
.col-2 .offer-img{
padding: 50px;
transform: translateX(-100px);
}
.small{
color: #555;
}
/*------Testimonial------*/
.testimonial{
padding-top: 100px;
}
.testimonial .col-3{
text-align: center;
padding: 40px 20px;
box-shadow: 0 0 30px 0px rgba(0,0,0,0.1);
cursor: pointer;
transition: transform 0.5;
}
.testimonial .col-3 img{
width: 50px;
margin-top: 20px;
border-radius: 50%;
}
.testimonial .col-3:hover{
transform: translateY(-10px);
}
.fa .fa-quote-left{
font-size: 34px;
color: #ff523b;
}
.col-3 p{
font-size: 12px;
margin: 12px 0;
color: #777;
}
.testimonial .col-3 h3{
font-weight: 600;
color: #555;
font-size: 16px;
}
/*----brands----*/
.brands{
margin: 100px auto;
}
.col-5{
width: 160px;
}
.col-5 img{
width: 100%;
cursor: pointer;
filter: grayscale(100%);
}
.col-5 img:hover{
filter: grayscale(0);
}
/*-----footer----*/
.footer{
background: #000;
color: #8a8a8a;
font-size: 14px;
padding: 60px 0 20px ;
}
.footer p{
color: #8a8a8a;
}
.footer h3{
color: white;
margin-bottom: 20px;
}
.footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4{
min-width: 250px;
margin-bottom: 20px;
}
.footer-col-1{
flex-basis: 30%;
}
.footer-col-2{
flex: 1;
text-align: center;
}
.footer-col-2 img{
width: 180px;
margin-bottom: 20px;
}
.footer-col-3, .footer-col-4{
flex-basis: 12%;
text-align: center;
}
ul{
list-style: none;
}
.Copyright{
text-align: center;
}
.menu-icon{
width: 28px;
margin-left: 20px;
display: none;
}
/*------media query for menu--------*/
#media only screen and (max-width: 800px){
nav ul{
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: max-height 0.5s;
}
nav ul li{
display: block;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
nav ul li a{
color: white;
}
.menu-icon{
display: block;
cursor: pointer;
}
}
/*media query for less than 600 px*/
#media only screen and (max-width: 600px){
.row{
text-align: center;
}
.col-2, .col-3, .col-4{
flex-basis: 100%;
}
}
do this change
.small-container{
width: 100%;
margin: auto;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
max-width: 90vw;
}
make a div before the class row like this
<div style="width: 100%; display: flex;justify-content: center;
align-items: center;">
<div class="row">
<div class="col-4">
<img src="product-1.jpg" alt="">
<h4>Curology moisturiser </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-2.jpg" alt="">
<h4>Beemster cheese wheel </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-3.jpg" alt="">
<h4>Aqua panna </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-4.jpg" alt="">
<h4>Orignal's beer light </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
</div>
</div>
i have advice for u dont use max width
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
max-width: 90vw;
}
.small-container{
width: 100%;
margin: auto;
}
add div befroe class row and enclude this css
<div style="width: 100%; display: flex;justify-content: center;
align-items: center;">
<div class="row">
<div class="col-4">
<img src="product-1.jpg" alt="">
<h4>Curology moisturiser </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-2.jpg" alt="">
<h4>Beemster cheese wheel </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-3.jpg" alt="">
<h4>Aqua panna </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<p>$50.00</p>
</div>
<div class="col-4">
<img src="product-4.jpg" alt="">
<h4>Orignal's beer light </h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o" "></i>
</div>
<p>$50.00</p>
</div>
</div>
</div>
You should first check your syntax!
e.g
<i class="fa fa-star-o" "></i>
<!-- should be -->
<i class="fa fa-star-o"></i>
or
<h3>Reach us at Whatsapp <span>©</span</h3>
<!-- should be -->
<h3>Reach us at Whatsapp <span>©</span></h3>
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>
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 am trying to get my icons and text to have same padding or margin. If you run the code you will see one category is near an icon and other one is far. I want to have consistency. I tried a lot of things but it doesnt reflect anything
.category_nav
{
height: 40px;
margin-top: 38px;
}
.category_nav_ul
{
list-style-type: none;
padding:0;
}
.category_nav_ul > li
{
display: inline-block;
}
#category_nav_ul_category
{
width: 380px;
cursor: pointer;
}
#category_nav_div
{
margin-top: 5px;
width: 380px;
position: absolute;
background-color: white;
padding-bottom: 10px;
}
#categories_content
{
margin-top: 10px;
}
.category_nav_div .content:hover
{
}
.categories
{
list-style: none;
}
.category
{
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 1px;
border: 0;
border-radius: 0;
}
.category:hover
{
border: 2px;
background:linear-gradient(to right, red 0px, red 3px, transparent 3px);
background-color: white;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
.category_icon
{
width: 20px !important;
padding-right: 5px;
background-color: red;
}
.category_content
{
margin-left: 15px !important;
}
.light-border
{
border: 1px solid #e8e8e8;
border-top: none;
}
h2.flash_title
{
color: rgb(120, 120, 120);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background: #fff;
color: #666;
font-size: 14px;
padding-left: 19px;
font-weight: 400;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
<div class="content" id="categories_content">
<ul class="categories list-group">
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-camera"></i>
</span>
<span class="category_content">
Camera
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-info-circle"></i>
</span>
<span class="category_content">
Clothes
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-mobile"></i>
</span>
<span class="category_content">
Mobiles
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-info-circle"></i>
</span>
<span class="category_content">
Graphics Cards
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-television"></i>
</span>
<span class="category_content">
Television
</span>
</li>
</ul>
</div>
</div>
In i tag you can use a class fa-fw, so all the icons has the same width
Example
<i class="fa fa-television fa-fw"></i>
add this class in all the i tags
.category_nav
{
height: 40px;
margin-top: 38px;
}
.category_nav_ul
{
list-style-type: none;
padding:0;
}
.category_nav_ul > li
{
display: inline-block;
}
#category_nav_ul_category
{
width: 380px;
cursor: pointer;
}
#category_nav_div
{
margin-top: 5px;
width: 380px;
position: absolute;
background-color: white;
padding-bottom: 10px;
}
#categories_content
{
margin-top: 10px;
}
.category_nav_div .content:hover
{
}
.categories
{
list-style: none;
}
.category
{
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 1px;
border: 0;
border-radius: 0;
}
.category:hover
{
border: 2px;
background:linear-gradient(to right, red 0px, red 3px, transparent 3px);
background-color: white;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
.category_icon
{
width: 20px !important;
padding-right: 5px;
background-color: red;
}
.category_content
{
margin-left: 15px !important;
}
.light-border
{
border: 1px solid #e8e8e8;
border-top: none;
}
h2.flash_title
{
color: rgb(120, 120, 120);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background: #fff;
color: #666;
font-size: 14px;
padding-left: 19px;
font-weight: 400;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
<div class="content" id="categories_content">
<ul class="categories list-group">
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-fw fa-camera"></i>
</span>
<span class="category_content">
Camera
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-fw fa-info-circle"></i>
</span>
<span class="category_content">
Clothes
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-fw fa-mobile"></i>
</span>
<span class="category_content">
Mobiles
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-fw fa-info-circle"></i>
</span>
<span class="category_content">
Graphics Cards
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-fw fa-television"></i>
</span>
<span class="category_content">
Television
</span>
</li>
</ul>
</div>
</div>
Font-awesome has a class specially to do that. fa-fw
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
http://fontawesome.io/examples/