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>
Related
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>`
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'm trying to create some layout, but been stuck with overlapping div - 'featured works' is like going under row with 3 icons and honestly can't figure out solution for this one. Just need to put overlapping div under three icons section. There will also be a few more under, so any advices appreciated.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* columns */
.col-1 {
width: 8.33%;
}
... typical grid 1-12
/* offset */
.col-offset-1 {
margin-left: 8.33%;
}
... same as above
/* clearfix */
row::before,
row::after {
content: "";
display: table;
clear: both;
}
[class*="col-"] {
float: left;
min-height: 1px;
height: 150px;
padding: 10px;
}
/* === */
header nav {
background-color: #544B46;
overflow: hidden;
}
header nav ul {
float: right;
margin: 0;
padding: 0;
list-style-type: none;
}
header nav ul li {
display: inline-block;
}
header nav ul li a {
line-height: 50px;
display: block;
color: #fff;
padding: 0 20px;
text-decoration: none;
text-transform: uppercase;
}
.hero img {
width: 100%;
margin: 0 auto;
padding: 0;
}
.icons {
margin: 50px auto;
text-align: center;
}
.icons i {
height: 75px;
width: 75px;
color: #544B46;
border-radius: 10%;
background-color: #fff;
font-size: 40px;
margin: 0 auto;
cursor: pointer;
border: 2px #544B46 solid;
display: inline-block;
padding: 15px 15px;
}
.icons h1,
.icons p {
padding: 15px;
}
<body>
<header>
<nav class="container">
<div class="row">
<ul>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Mission</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
</nav>
</header>
<section class="hero">
<div class="container">
<div class="row">
<img src="http://naturalnie.media.pl/test/train-long.jpg">
</div>
</div>
</section>
<section class="icons">
<div class="container">
<div class="row">
<div class="col-4">
<i class="fab fa-researchgate"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
<div class="col-4">
<i class="fas fa-laptop-code"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
<div class="col-4">
<i class="fas fa-cogs"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
</div>
</div>
</section>
<section class="featured">
<div class="container">
<div class="row">
<div class="col-12">
<h1>FEATURED WORKS</h1>
</div>
</div>
</div>
</section>
</body>
Sorry for indents, new here.
Your issue is that you set your css class [class*="col-"] with height: 150px;. Get rid of the height requirement, and it goes back into place.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* columns */
.col-1 {width: 8.33%;}... typical grid 1-12
/* offset */
.col-offset-1 {margin-left: 8.33%;}... same as above
/* clearfix */
row::before,
row::after {
content: "";
display: table;
clear: both;
}
[class*="col-"] {
float: left;
min-height: 1px;
/*height: 150px;*/
padding: 10px;
}
/* === */
header nav {
background-color: #544B46;
overflow: hidden;
}
header nav ul {
float: right;
margin: 0;
padding: 0;
list-style-type: none;
}
header nav ul li {
display:inline-block;
}
header nav ul li a {
line-height: 50px;
display: block;
color: #fff;
padding: 0 20px;
text-decoration: none;
text-transform: uppercase;
}
.hero img {
width: 100%;
margin: 0 auto;
padding: 0;
}
.icons {
margin: 50px auto;
text-align: center;
}
.icons i {
height: 75px;
width: 75px;
color: #544B46;
border-radius: 10%;
background-color:#fff;
font-size: 40px;
margin: 0 auto;
cursor: pointer;
border: 2px #544B46 solid;
display: inline-block;
padding: 15px 15px;
}
.icons h1,
.icons p {
padding: 15px;
}
<body>
<header>
<nav class="container">
<div class="row">
<ul>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Mission</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
</nav>
</header>
<section class="hero">
<div class="container">
<div class="row">
<img src="http://naturalnie.media.pl/test/train-long.jpg">
</div>
</div>
</section>
<section class="icons">
<div class="container">
<div class="row">
<div class="col-4">
<i class="fab fa-researchgate"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
<div class="col-4">
<i class="fas fa-laptop-code"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
<div class="col-4">
<i class="fas fa-cogs"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
</div>
</div>
</section>
<section class="featured">
<div class="container">
<div class="row">
<div class="col-12">
<h1>FEATURED WORKS</h1>
</div>
</div>
</div>
</section>
</body>
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
After so many efforts finally I have designed footer for my website. But whenever I reduce the browser size that is in mobile view I get a blank space below my footer. It is because of the margins added to the content inside footer for desktop view. Also I don't want to change the arrangement of the content inside footer. I tried many things but still not able to get rid of that blank space.
html:
<div class="footer" style="font-family: Georgia,Serif;">
<div class="container">
<div class="col-md-4 col-sm-4">
<ul class="list-unstyled list-inline" style="margin-left:50px">
<li><a style="color:white;font-size:20px" href="AboutUs.aspx">About Us</a></li>
<li><a style="color:white;font-size:20px" href="ContactUs.aspx">Contact Us</a></li>
</ul>
</div>
<div class="col-md-4 col-sm-4">
<p style="color:white;text-align:center;font-size:15px;margin-top:48px">© 2016 Ashwini All Rights Reserved</p>
</div>
<div class="col-md-4 col-sm-4">
<ul class="social-icons icon-circle list-unstyled list-inline" style="float:right">
<li> <i class="fa fa-facebook"></i></li>
<li> <i class="fa fa-twitter"></i></li>
<li> <i class="fa fa-google-plus"></i></li>
</ul>
</div>
</div>
</div>
css:
.footer {
position: absolute;
right: 0;
bottom: 0 !important;
left: 0;
padding: 1rem;
background-color: #0E0E0E;
height:100px;
}
You can remove the height for mobile screens.
Also you can align them centrally for mobile.
#media only screen and (max-width: 767px) {
.footer {
height: auto;
}
.footer ul{
text-align: center;
margin-left: 0;
padding-left: 0;
float: none;
}
.footer li{
display: inline-block;
margin: 0 5px;
}
}
https://jsfiddle.net/afelixj/3u3k4v06/
The problem here is, your CSS is currently like this
.footer
{
position: absolute;
right: 0;
bottom: 0 !important;
left: 0;
padding: 1rem;
background-color: #0E0E0E;
height:100px;
}
Where the height of the footer is fixed to 100px.
But your HTML content has three such <div class="col-md-4 col-sm-4"></div> divs .Your 3rd row is crossing the 100px threshold.
Change your min height to a greater value.Better option is to use % or vh
.footer
{
position: absolute;
right: 0;
bottom: 0 !important;
left: 0;
padding: 1rem;
background-color: #0E0E0E;
height:200px;
color:white;
}
Here is the working demo
try adding this css will resolve the issue.
#media only screen and (max-width: 500px) {
.footer p{
margin-top:0px !important;
}
}
You can make overflow:hidden;
Working Codepen: http://codepen.io/anon/pen/EKPrEB
.footer
{
overflow: hidden; /*MODIFICATION */
padding-bottom:2px; /*MODIFICATION */
position: absolute;
margin-bottom:0;
right: 0;
bottom: 0 !important;
left: 0;
background-color: #0E0E0E;
height:100px;
}