I have a container and then overlay then the boxes, and the content of the boxes is out of the container. I can't figure out the problem.
I tried display: block but it doesn't work
.about-us .statics-container {
position: relative;
background-image: url("/images/stats.png");
background-size: cover;
padding: 60px 0;
}
.about-us .statics {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 40px;
background-color: var(--transparent-color);
width: 80%;
margin: 0 auto;
}
.overlay {
position: absolute;
background-color: rgb(0 0 0 / 40%);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="statics-container">
<div class="overlay">
<div class="statics">
<div class="static">
<i class="fa-solid fa-mug-hot"></i>
<span>1324</span>
<span>coffee drinks</span>
</div>
<div class="static">
<i class="fa-solid fa-list-check"></i>
<span>165</span>
<span>completed projects</span>
</div>
<div class="static">
<i class="fa-solid fa-envelope-circle-check"></i>
<span>1824</span>
<span>mail sent</span>
</div>
<div class="static">
<i class="fa-solid fa-award"></i>
<span>24</span>
<span>awards received</span>
</div>
</div>
</div>
</div>`
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.
<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;
}
I have recent-posts div that show two post with their images and text. after recent-posts I have another div contact-us that contain an image and some text. My issue appear in extra-small size where recent-posts posts go under contact-us part. How can I fix that? The following is my codes and JsFiddle.
HTML:
<div id="recent-posts" class="center-block row">
<div class="posts col-md-3 col-sm-5 col-xs-9">
<div class="posts-div">
<div class="img-hover">
<img src="images/post1.jpg" class="img-responsive">
<div class="overlay col-md-12 col-xs-12">
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart"></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye"></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
</div>
</div>
<p class="text-center">dsfdsfsdfldshfdskfhdsf</div>
</div>
<div class="posts col-md-3 col-sm-5 col-xs-9">
<div class="posts-div">
<div class="img-hover">
<img src="images/post2.jpg" class="img-responsive">
<div class="overlay col-md-12 col-xs-12">
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart "></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye "></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
</div>
</div>
<p class="text-center">dsjkfhjdssafjsdkjhfdsf</p>
</div>
</div>
</div>
<div id="contact-us" class="row">
<div class="col-md-12 col-xs-12">
<img src="http://www.infocurse.com/wp-content/uploads/2014/11/716988156_1368083660.png" class="img-responsive">
<div id="contact-us-text">
<p>sdkf,sd,kfnds,nf,d.....</p>
<p>kdsfnks,dnf,ksdnf,kdsnf,kdsnf,d</p>
<button class="btn btn-success pull-left">124234234</button>
</div>
</div>
</div>
Css:
#recent-posts{
height: 350px;
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
margin-bottom: 100px;
}
.posts{
display: flex;
flex-direction: column;
height: 350px;
margin-top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 5px #888888;
padding: 0;
margin-left: 20px;
margin-right: 20px;
}
.posts img{
border-radius: 5px 5px 0 0;
cursor: pointer;
}
.posts .btn-success{
position: absolute;
background-color: #01a89e;
width: 50%;
color: #101010;
cursor: auto;
margin-top: -17px;
margin-right: 25%;
}
.posts .btn-success:active{
background-color: #01a89e;
color: #101010;
box-shadow: none;
}
.posts p{
margin-top: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overlay {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(46, 183, 175, .7);
overflow: hidden;
height:0;
transition: .8s ease;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
margin-left: 15px;
}
.posts-div:hover .overlay {
bottom: 0;
top: 0;
height: auto;
overflow: hidden;
}
.img-hover{
position: relative;
}
.post-icon{
color: rgba(255, 255, 255, 1);
transform: rotate(45deg);
opacity: 1;
}
.post-icon span{
transform: rotate(-45deg);
font-size: 12px;
position: absolute;
left: 50%;
top: 0.6em;
margin-left: -7px;
color: #101010;
font-weight: bold;
}
.fa-heart{
color: red !important;
}
#contact-us{
height: 200px;
margin-bottom: 30px;
box-shadow: 0 1px 5px #666666, 0 -1px 5px #666666;
position: relative;
padding: 0;
overflow: hidden;
}
#contact-us-text{
position: absolute;
top: 20%;
left: 12%;
}
#contact-us-text p{
color: white;
}
#contact-us-text .btn-success{
background-color: #01a89e;
cursor: auto;
}
#contact-us-text .btn-success:active{
background-color: #01a89e;
box-shadow: none;
}
JsFiddle
Recent-posts class has a fixed height.
#recent-posts{
height: 350px; // THIS LINE IS THE REASON!
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
margin-bottom: 100px;
}
Updated fiddle
I've been trying to fixed the problem with my navigation bar.
What I'd like to do, is to put always the home icon on the left and setting on the right while the navigation title on the center as shown in the image.
But still look like this
when view in smallest/large screen other than my laptop 1366px wide
Is there anyone can help me with the same problem?
here the code.
<nav>
<div class="nav__container">
<div class="nav__container--left">
<div class="">
<a href="http://localhost/mpci_virtual_office/" title="Return Home">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="nav__container--center">
<strong>Home</strong>
</div>
<div class="nav__container--toggle">
<a id="push" class="visible-xs visible-sm visible-md"><i class="fa fa-bars "></i></a>
</div>
<div class="nav__container--right">
<a class="dropdown-toggle" data-toggle="dropdown" title="Settings">
<i class="fa fa-gear fa-lg"></i>
</a>
<ul class="dropdown-menu">
<li>View Profile</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
And this is my CSS
/* Naviation Style */
.nav__container {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
}
.nav__container--left,
.nav__container--center,
.nav__container--toggle,
.nav__container--right {
width: 50px;
height: 100%;
position: absolute;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items:center;
align-content: center;
}
.nav__container--left { }
.nav__container--left div { }
.nav__container--left div a { }
.nav__container--center {
width: 100%;
z-index: -1;
text-align: center;
}
.nav__container--toggle {
right: 50px;
}
.nav__container--right {
right: 0;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
try out this css snippet. if you set position you allways have to set top|bottom and left|right
Something like the below should work (expand snippet).
/* Naviation Style */
.nav__container {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
}
.nav__container--left,
.nav__container--center,
.nav__container--toggle,
.nav__container--right {
width: 50px;
height: 100%;
position: absolute;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items:center;
align-content: center;
}
.nav__container--left { }
.nav__container--left div { }
.nav__container--left div a { }
.nav__container--center {
width: 100%;
z-index: -1;
text-align: center;
}
.nav__container--toggle {
right: 50px;
}
.nav__container--right {
right: 0;
}
.nav__container {
position: fixed;
background: cadetblue;
left: 0;
right: 0;
height: auto;
min-height: 50px;
color: white;
}
ul.dropdown-menu {
display: none;
}
.nav__container--right {
background: #508587;
}
.nav__container--left {
background: #508587;
}
body {
min-height: 1000px;
}
<nav>
<div class="nav__container">
<div class="nav__container--left">
<div class="">
<a href="http://localhost/mpci_virtual_office/" title="Return Home">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="nav__container--center">
<strong>Home</strong>
</div>
<div class="nav__container--toggle">
<a id="push" class="visible-xs visible-sm visible-md"><i class="fa fa-bars "></i></a>
</div>
<div class="nav__container--right">
<a class="dropdown-toggle" data-toggle="dropdown" title="Settings">
<i class="fa fa-gear fa-lg"></i>
</a>
<ul class="dropdown-menu">
<li>View Profile</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
Essentially:
.nav__container {
position: fixed;
background: cadetblue;
left: 0;
right: 0;
}