I'm having this issue with my footer. I am trying to put the logo image in top center part of the footer and the text part has somehow went underneath the footer. How can I make it push up in the footer section? I have an image below so you guys have a better understanding:
HTML:
<div class="footer text-center spacer">
<div class="col-sm-4">
<span>Phone Numbers:</span>
<p>077***** <span>or </span>077*****</p>
</div>
<div class="col-sm-4">
<p> <img src= "images/preloaderlogo2%20.png" class = "swiftly"/></p>
<p class="wowload flipInX"><i class="fa fa-facebook fa-2x"></i> <i class="fa fa-instagram fa-2x"></i> <i class="fa fa-twitter fa-2x"></i> </p>
Copyright 2016 Swift Digi. All rights reserved.
</div>
<div class="col-sm-4">
<span>Email:</span>
<p>#hotmail.com</p>
</div>
CSS:
/*===FOOTER===*/
.footer {
background-color:#0A0A0A;
color: #fff;
font-size: 1em;
color: #aaa;
}
.footer a {
color: #aaa;
margin: 0 1em;
}
#media (max-width: 767px) {
.footer {
margin-top: 2em;
padding-bottom: 2em;
}
}
.footer p{
color: green;
font-weight: 700;
font-family: 'Roboto', sans-serif;
}
.footer span{
color:white;
font-weight: 400;
}
.footer .col-sm-4{
margin-bottom: 20px;
}
.footer img{
text-align:center;
height:40px;
}
So, How can I push the logo image a bit higher and make the text be in the footer and not underneath the footer?
html, body {
height: 100%;
}
#container {
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
#footer {
height: 330px;
position: relative;
}
<div id="container">
<div id="header">Header</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="content">Content Here.</div>
<div class="clearfooter"></div>
</div><!—End Container—>
<div id="footer">Footer Here.</div>
Check this link:-http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css
use position:relative and then use top or bottom according to adjustment
check the documentation link to discription
Related
i am developing my portfolio website but i came into an error can anyone just help me.
i need to make my social icons responsive.
Here The The Image For Desktop Version.
I need To make it responsive and direction to row for mobile version. Please Help Me.
As You Can See Here The Social Icons Are Not Responsive.
index.html
```
<!-- home -->
<section class="home bd-grid" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<div class="social">
<ul>
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</section>```
Styles.css
.home{
display: flex;
flex-wrap: wrap;
background: url("/img/banner.jpg") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: cover;
background-attachment: fixed;
font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
width: 100%;
display: flex;
}
.home .max-width .row{
margin-right: 0;
}
.home .home-content .text-1{
font-size: 27px;
}
.home .home-content .text-2{
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3{
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span{
color: #32de84;
font-weight: 500;
}
.home .home-content a{
display: inline-block;
background: #32de84;
color: #fff;
font-size: 25px;
padding: 12px 36px;
margin-top: 20px;
font-weight: 400;
border-radius: 6px;
border: 2px solid #32de84;
transition: all 0.3s ease;
}
.home .home-content a:hover{
color: #32de84;
background: none;
}
.social{
position: absolute;
top: 35%;
right: 5%;
color: #fff;
/* background-color: #ffffff; */
}
.social ul{
list-style: none;
}
.social li{
margin-bottom: 20px;
text-align: center;
}
.circle{
background-color: transparent;
border: 2px solid white;
border-radius: 200px;
height: 35px;
width: 35px;
}
.social i{
padding-top: 7px;
height: 30px;
width: 30px;
color: #ffffff;
}
#media (max-width: 947px) {
.home .home-content .text-2 {
font-size: 60px;
}
}```
Try thinking of your problem the other way around.
Layout shifts like this are much easier to deal with when working with a 'mobile first' approach. (style the mobile version and then override at a min-width media query to style the desktop version, rather than styling the desktop perfectly and then trying to fold everything down to mobile.)
I've knocked up a quick demo of what should work for you.
This is NOT a direct replication of or fix of your existing code, just a demo of the methods you could use, but hopefully from this demo and the snippets, you should understand what is happening and be able to apply some of these methods to your own code.
The method is entirely done with flex properties.
The socials are no longer absolutely positioned and the unnecessary social wrapper div is removed.
I've added border colors and padding just to more obviously show you whats happening to the box model when you resize your browser.
To view the demo, click 'run code snippet' - but make sure to then also click the 'full page' option otherwise it'd only show you the mobile layout.
Here's the JSFiddle where I created the demo incase it's useful: CLICK TO VIEW FIDDLE
.contentWrapper {
border: 1px solid pink;
padding: 10px;
}
.mainContent {
border: 1px solid blue;
padding: 10px;
}
.social {
border: 1px solid green;
padding: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
gap: 10px;
}
.circle {
background-color: red;
border: 2px solid white;
border-radius: 200px;
height: 35px;
width: 35px;
}
#media screen and (min-width: 948px) {
.myWrapper {
display: flex;
min-height: 100vh;
flex-direction: row;
}
.contentWrapper {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center
}
.mainContent {
width: calc(100% - 55px);
max-width: 1000px;
margin: 0 auto;
}
.social {
display: flex;
flex-direction: column;
justify-content: center;
}
.social ul {
display: flex;
flex: 0 0 55px;
flex-direction: column;
}
}
<section class="myWrapper">
<div class="contentWrapper">
<div class="mainContent">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<ul class="social">
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</section>
To make icons in row
we can do it using #media in the approach
APPROACH
Use flexbox to make your icons in a row
and use grid to make everything in a row when you are on a big screen
you can also set width and then add margin auto to make things centre but using justify-content center is better ---> not told in this answer
<!-- home -->
<section class="home bd-grid" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<div class="social">
<ul class="icons"> // give class icons to make it a flexbox
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</section>```
***css***
.icons{
display: flex;
flex-direction: column;
justify-content: center;
}
#media screen and (min-width: 800px //your mobile screen width) {
.icons {
display: flex;
justify-content:center;
}
.home{
display:grid;
width: 100vw;
gap: 20px;
text-align:center;
grid-template-column:2fr 2fr;
}
I am not able to align the social media details side by side. Right now it's one under the other. I want it to be placed side by side(column wise) i.e. something like:
address linkedin github twitter email
instead of
address
linkedin
github
twitter
email
Here is the code:
.contact .title::after{
content: "";
}
/*
.contact .contact-content .column{
width: calc(20% - 30px);
}
*/
.contact .contact-content .text{
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.contact .contact-content .left p{
text-align: justify;
}
.contact .contact-content .left .icons{
margin: 10px 0;
}
.contact .contact-content .row{
display: flex;
height: 65px;
align-items: center;
width: 100%;
}
.contact .contact-content .row .info{
margin-left: 30px;
}
.contact .contact-content .row i{
font-size: 25px;
color: #9933FF;
}
.contact .contact-content .info .head{
font-weight: 500;
}
.contact .contact-content .info .sub-title{
color: #333;
}
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Reach out to Me</h2>
<div class="contact-content">
<div class="column left">
<div class="text"></div>
<div class="icons">
<div class="row">
<i class="uil uil-user-location"></i>
<div class="info">
<div class="head">Address</div>
<div class="sub-title">country</div>
</div>
</div>
<div class="row">
<i class="uil uil-linkedin"></i>
<div class="info">
<div class="head">Linkedin</div>
<a href="https://www.linkedin.com/in">
<div class="sub-title">xyz</div>
</a>
</div>
</div>
<div class="row">
<i class="uil uil-github"></i>
<div class="info">
<div class="head">Github</div>
<a href="https://github.com">
<div class="sub-title">xyz</div>
</a>
</div>
</div>
<div class="row">
<i class="uil uil-twitter"></i>
<div class="info">
<div class="head">Twitter</div>
<a href="https://twitter.com">
<div class="sub-title">xyz</div>
</a>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">Email</div>
<a href="mailto:xyz#gmail.com">
<div class="sub-title">xyz#gmail.com</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
You have row: 100%; in the class .contact .contact-content .row - remove this.
add class .icons with display: flex;
This will sort your issue.
You may also want to add padding, in which case add a class .row with your required padding.
Alternatively for a more responsive solution add justify-content: space-around; to .icons class.
Demo with 25px padding to the right
Demo with space-around
Expected
Position: Fixed
[
Remove Position: Fixed
[
my html
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.container-fluid .wrapper {
display: flex;
position: relative;
}
.container-fluid .wrapper .sidebar {
position: fixed;
width: 200px;
height: 100%;
background: #4b4276;
padding: 30px 0;
}
<div class="container-fluid">
<div class="wrapper">
<div class="sidebar">
<h2>Paperpay</h2>
<ul>
<li><i class="fas fa-file-invoice"></i>Statements</li>
<li><i class="fas fa-users"></i>Profile</li>
<li><i class="far fa-newspaper"></i>Newspapers</li>
</ul>
</div>
<div class="main_content">
<div class="header">Welcome to Paper Pay</div>
<div class="info">
welcom to info
</div>
</div>
</div>
</div>
and when to use position
**new to css help me to reach my goal that's UI new to css help me to reach my goal that's UI **
You reference display: flex but don't seem to actually use it.
One quick a dirty solution is get rid of display: flex if you aren't using it and give main_content a left margin greater or equal to the width of your sidebar.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.container-fluid .wrapper {
position: relative;
}
.container-fluid .wrapper .sidebar {
position: fixed;
width: 200px;
height: 100%;
background: #4b4276;
padding: 30px 0;
}
.main_content{
margin-left:200px;
}
<div class="container-fluid">
<div class="wrapper">
<div class="sidebar">
<h2>Paperpay</h2>
<ul>
<li><i class="fas fa-file-invoice"></i>Statements</li>
<li><i class="fas fa-users"></i>Profile</li>
<li><i class="far fa-newspaper"></i>Newspapers</li>
</ul>
</div>
<div class="main_content">
<div class="header">Welcome to Paper Pay</div>
<div class="info">
welcom to info
</div>
</div>
</div>
</div>
hey so im doing something for a Webdesign class I'm taking. I'm trying to select these <h2>'s inside element <divclass=left> but It's not working for me.
nav {
display: flex;
flex-direction: row;
height: 75px;
background-color: rebeccapurple;
color: white;
justify-content: space-between;
}
.left h2{margin-left: 20px}
.right{
}
body{padding:0; margin: 0}
.boxs {
display: flex
}
.boxs>* {
padding: 5px;
height: 200px;
border: black solid 2px;
box-sizing: border
}
<nav>
<nav>
<div class=left></div> <i class="fas fa-ad"></i>
<h2>Home</h2>
<h2>Browser</h2>
<h2>Download</h2>
<h2>Contact us</h2>
</nav>
<div class="right"><h2>Sign-in</h2></div>
</nav>
Your div with the class left is not wrapping anything. Your HTML should look like this if you want the CSS .left h2 to work.
.left h2{margin-left: 20px}
<nav>
<nav>
<div class="left"> <i class="fas fa-ad"></i>
<h2>Home</h2>
<h2>Browser</h2>
<h2>Download</h2>
<h2>Contact us</h2>
</div>
</nav>
<div class="right">
<h2>Sign-in</h2>
</div>
</nav>
You can try this if you want to select h2 elements:
nav h2 {
color: red;
}
So I've created the Navbar which jumps to sections on the page via clicking. It works for my 'projects' and 'contact' sections but when I click 'about' the navbar jumps to it, but becomes transparent and unclickable. I tried adding a padding-top X px; to the 'about' element, but it still doesn't work.
Code is as follows in Codepen:
HTML:
<body>
<div class="fluid-container">
<h2> My Web Portfolio</h2>
<!--Creates the Navigation bar -->
<div class="navbar">
About
Projects
Contact
</div>
<!-- this creates the About section-->
<div class="main">
<div id=about>
<h3>Blank</h3>
</div>
<!-- This creates the 'project' section of the webpage-->
<div id=projects>
<h3><pre>My tribute page to Neil Armstrong<pre></h3>
<a href="#"><img border="0" alt="My Tribute page" align="center" src="#"/>
</a>
</div>
<!--contact section-->
<div id=contact>
<h3>Contact me via Facebook, Twitter, and Instagram!<h3>
<a href="#" class="fa fa-facebook" ></a>
</div>
</div>
</div>
</body>
CSS:
body {
background-color:turquoise;
padding-top:25px;
}
h2 {
text-align:center;
}
.navbar {
overflow:hidden;
background-color:#333;
position:fixed;
top:0px;
width:100%;
}
.navbar a {
float:left;
display:block;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
font-size:17px;
}
.main {
padding:16px;
margin-top:65px;
}
#projects {
position:relatve;
width:150px;
height:100px;
margin-top:200px;
margin-left:150px;
}
#contact {
position:relatve;
text-align:center;
margin-top:800px;
}
#about{
position:relative;
text-align:center;
padding-top:25px;
}
What am I doing wrong here?
When the page jumps to about, the sections obscure the nav bar. If you set a z-index to #main and the nav bar, you can ensure the navbar is always above the sections. I hope this helps.
body {
background-color: turquoise;
padding-top: 25px;
}
h2 {
text-align: center;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0px;
width: 100%;
z-index: 10;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.main {
padding: 16px;
position: relative;
z-index: 0
margin-top: 65px;
}
#projects {
position: relatve;
width: 150px;
height: 100px;
margin-top: 200px;
margin-left: 150px;
}
#contact {
position: relatve;
text-align: center;
margin-top: 800px;
}
#about {
position: relative;
text-align: center;
padding-top: 25px;
}
<body>
<div class="fluid-container">
<h2> My Web Portfolio</h2>
<!--Creates the Navigation bar -->
<div class="navbar">
About
Projects
Contact
</div>
<!-- this creates the About section-->
<div class="main">
<div id=about>
<h3>Blank</h3>
</div>
<!-- This creates the 'project' section of the webpage-->
<div id=projects>
<h3><pre>My tribute page to Neil Armstrong<pre></h3>
<a href="#"><img border="0" alt="My Tribute page" align="center" src="#"/>
</a>
</div>
<!--contact section-->
<div id=contact>
<h3>Contact me via Facebook, Twitter, and Instagram!<h3>
<a href="#" class="fa fa-facebook" ></a>
</div>
</div>
</div>
</body>