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
Related
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>
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>
I have created a list of html lists which has an image and a text on the right.
I was trying to put a border on the top and bottom of each item list. And I also did try to remove the border at the top for the first child and the border bottom on the last child to make it equal.
Then I added a hover effect that will hover on each list and whenever active. However for some reason this is not working and the padding and border for each item is all mess up.
Tried my best to play around my boxes but still having a hard time fixing it.
Here's my CSS:
body{
color: #fff;
}
ul li {
list-style: none;
display: block;
clear: both;
}
.puff-list {
background-color: #34495e;
width: 260px;
float: left;
}
.puff-list .puffs h2{
text-align: center;
border-bottom: 1px solid #57789a;
padding: 20px 30px 35px 20px;
font-size: 23px;
font-weight: 400;
}
.puff-list .fa-puffs {
position: relative;
left: -25px;
color: #34495e;
}
.puff-list ul {
/*padding: 20px 40px;*/
padding: 0;
}
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-child{
border-top: none;
}
.puff-list ul li:last-child{
border-bottom: 1px solid #57789a;
}
.puff-list ul li:hover{
background-color: #5b7b9b;
cursor: pointer;
}
.puff-list .puff-details {
float: left;
margin-top: 8px;
}
.puff-list img {
margin-right: 5px;
float: left;
}
.puff-list .puff-details {
padding-left: 8px;
}
.puff-list .status {
color: #658aaf;
}
You can view the whole HTML and CSS playground on JSFIDDLE: https://jsfiddle.net/9b6w9L6m/
Any idea how can I fix this?
First you need to fix some things.
You have a float: left on your .puff-details which isn't needed, since you aren't floating any other elements on that line, so remove that.
The elements inside .puff-details are floated, which makes the "float outside" the element. Therefor you need to add the clearfix solution to make .puff-details expand:
.puff-list .puff-details {
/*float: left; < remove this line */
margin-top: 8px;
}
.puff-list .puff-details:after {
content: " ";
display: block;
height: 0;
clear: both;
}
The border on the first and last item are already working.
Complete code:
body {
color: #fff;
}
ul li {
list-style: none;
display: block;
clear: both;
}
.puff-list {
background-color: #34495e;
width: 260px;
float: left;
}
.puff-list .puffs h2 {
text-align: center;
border-bottom: 1px solid #57789a;
padding: 20px 30px 35px 20px;
font-size: 23px;
font-weight: 400;
}
.puff-list .fa-puffs {
position: relative;
left: -25px;
color: #34495e;
}
.puff-list ul {
/*padding: 20px 40px;*/
padding: 0;
}
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-of-type {
border-top: none;
}
.puff-list ul li:last-child {
border-bottom: 1px solid #57789a;
}
.puff-list ul li:hover {
background-color: #5b7b9b;
cursor: pointer;
}
.puff-list .puff-details {
/*float: left;*/
margin-top: 8px;
}
.puff-list .puff-details:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.puff-list img {
margin-right: 5px;
float: left;
}
.puff-list .puff-details {
padding-left: 8px;
}
.puff-list .status {
color: #658aaf;
}
<aside class="puff-list" id="puff-list">
<div class="puffs">
<h2> <i class="fa fa-address-book-o"></i> Check List</h2>
</div>
<ul>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Food</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Russian</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Honey</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Mox</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Party</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Event</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Rrose</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">test</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Manga</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</aside>
You must add pseudo class for li like this
body{
color: #fff;
}
ul li {
list-style: none;
display: block;
clear: both;
}
.puff-list {
background-color: #34495e;
width: 260px;
float: left;
}
.puff-list .puffs h2{
text-align: center;
border-bottom: 1px solid #57789a;
padding: 20px 30px 35px 20px;
font-size: 23px;
font-weight: 400;
}
.puff-list .fa-puffs {
position: relative;
left: -25px;
color: #34495e;
}
.puff-list ul {
/*padding: 20px 40px;*/
padding: 0;
}
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-child{
border-top: none;
}
.puff-list ul li:last-child{
border-bottom: 1px solid #57789a;
}
.puff-list ul li:hover{
background-color: #5b7b9b;
cursor: pointer;
}
.puff-list ul li::after {
display: block;
content: "";
clear: both;
}
.puff-list .puff-details {
float: left;
margin-top: 8px;
}
.puff-list img {
margin-right: 5px;
float: left;
}
.puff-list .puff-details {
padding-left: 8px;
}
.puff-list .status {
color: #658aaf;
}
<aside class="puff-list" id="puff-list">
<div class="puffs">
<h2> <i class="fa fa-address-book-o"></i> Check List</h2>
</div>
<ul>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Food</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Russian</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Honey</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Mox</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Party</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Event</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Rrose</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">test</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Manga</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</aside>
Have you tried adding and removing border on the first and last child?
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-child{
border-top: none;
}
.puff-list ul li:last-child{
border-bottom: 1px solid #57789a;
}
And also try using shorthand padding instead of dividing them.
https://codepen.io/anon/pen/NpoevM
http://imgur.com/a/OQ3cu
I want to have the small lines to separate the boxes. I was thinking about how to make the lines like in the picture. I was thinking using borders or span but having trouble
#third {
height: 55%;
width: 40%;
display: flex;
flex-direction: column;
float: right;
}
.t-row {
height: 100%;
display: flex;
}
.tbox {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fa {
font-size: 5em !important;
}
<section id="third">
<div class="hr-lines">
<hr class="icon-sep">
</div>
<div class="t-row">
<div class="tbox tb-one">
<i class="fa fa-home" aria-hidden="true"></i>
<h1 class="t-text">Home</h1>
</div>
<div class="tbox tb-two">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<h1 class="t-text">About</h1>
</div>
</div>
<div class="t-row">
<div class="tbox tb-three">
<i class="fa fa-book" aria-hidden="true"></i>
<h1 class="t-text">Work</h1>
</div>
<div class="tbox tb-four">
<i class="fa fa-envelope" aria-hidden="true"></i>
<h1 class="t-text">Hire</h1>
</div>
</div>
</section>
check below snippet. I have used :after for all four div and used border to create the + sign.
#third {
height: 55%;
width: 40%;
display: flex;
flex-direction: column;
float: right;
}
.t-row {
height: 100%;
display: flex;
}
.tbox {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fa {
font-size: 5em !important;
}
.tb-one,
.tb-two,
.tb-three,
.tb-four {
position: relative;
}
.tb-one:after,
.tb-two:after,
.tb-three:after,
.tb-four:after {
position: absolute;
content: " ";
border: 1px solid #000;
width: 20px;
height: 20px;
display: block;
}
.tb-one:after {
bottom: 0;
right: 0;
border-top: none;
border-left: none
}
.tb-two:after {
bottom: 0;
left: 0;
border-top: none;
border-right: none
}
.tb-three:after {
top: 0;
right: 0;
border-bottom: none;
border-left: none
}
.tb-four:after {
top: 0;
left: 0;
border-bottom: none;
border-right: none
}
<section id="third">
<div class="hr-lines">
<hr class="icon-sep">
</div>
<div class="t-row">
<div class="tbox tb-one">
<i class="fa fa-home" aria-hidden="true"></i>
<h1 class="t-text">Home</h1>
</div>
<div class="tbox tb-two">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<h1 class="t-text">About</h1>
</div>
</div>
<div class="t-row">
<div class="tbox tb-three">
<i class="fa fa-book" aria-hidden="true"></i>
<h1 class="t-text">Work</h1>
</div>
<div class="tbox tb-four">
<i class="fa fa-envelope" aria-hidden="true"></i>
<h1 class="t-text">Hire</h1>
</div>
</div>
</section>
In your code add four classes with border property of div.
<style>
#third {
height: 55%;
width: 40%;
display: flex;
flex-direction: column;
float: right;
}
.t-row {
height: 100%;
display: flex;
}
.tbox {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fa {
font-size: 5em !important;
}
.left-border{ border-left : 1px solid;}
.right-border{ border-right : 1px solid;}
.bottom-border{ border-bottom : 1px solid;}
.top-border{ border-top: 1px solid;}
</style>
<section id="third">
<div class="hr-lines">
<hr class="icon-sep">
</div>
<div class="t-row">
<div class="tbox tb-one right-border bottom-border">
<i class="fa fa-home" aria-hidden="true"></i>
<h1 class="t-text">Home</h1>
</div>
<div class="tbox tb-two left-border bottom-border">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<h1 class="t-text">About</h1>
</div>
</div>
<div class="t-row">
<div class="tbox tb-three top-border right-border">
<i class="fa fa-book" aria-hidden="true"></i>
<h1 class="t-text">Work</h1>
</div>
<div class="tbox tb-four top-border left-border">
<i class="fa fa-envelope" aria-hidden="true"></i>
<h1 class="t-text">Hire</h1>
</div>
</div>
</section>
You can use a '+' inside a span and position / style it
#third {
height: 55%;
width: 40%;
display: flex;
flex-direction: column;
float: right;
position:relative;
}
.t-row {
height: 100%;
display: flex;
}
.tbox {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fa {
font-size: 5em !important;
}
.lines { position:absolute; font-size:150px; top:17%; left:40% }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<section id="third">
<span class="lines">+</span>
<div class="t-row">
<div class="tbox tb-one">
<i class="fa fa-home" aria-hidden="true"></i>
<h1 class="t-text">Home</h1>
</div>
<div class="tbox tb-two">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<h1 class="t-text">About</h1>
</div>
</div>
<div class="t-row">
<div class="tbox tb-three">
<i class="fa fa-book" aria-hidden="true"></i>
<h1 class="t-text">Work</h1>
</div>
<div class="tbox tb-four">
<i class="fa fa-envelope" aria-hidden="true"></i>
<h1 class="t-text">Hire</h1>
</div>
</div>
</section>
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;
}