This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
I am having an issue with my homepage - I do not have enough content for a fullpage and I am trying to set the position of this section above the footer at the bottom.
I had success with using positon: fixed; and bottom: 50px; to sit above my footer, however when I was opening the navigation on an ipad, the navigation would disappear behind the section.
I'm not sure how to tackle the problem, I was attempting to use vertical-align: bottom; but could not get it to work.
My CSS:
section.hero {
max-height: 400px;
text-align: center;
img.hero-responsive {
width: 100%;
height: 100px;
}
h2 {
width: 90%;
margin: 0 auto;
font-size: 1.5em;
top: -90px;
font-weight: 800;
position: relative;
}
h3 {
position: relative;
top: -60px;
font-weight: 800;
}
}
section.info {
background-color: #464646;
height: auto;
position: relative;
top: -50px;
width: 100vw;
padding: 0px;
left: -5px;
text-align: center;
color: white;
padding-bottom: 50px;
.row {
margin: 0px !important;
padding: 0px !important;
.col-lg-3 {
border-top: 2px solid rgba(160, 160, 160, 0.8);
margin-top: 5px !important;
padding: 0px !important;
i {
font-size: 40px;
padding: 10px;
margin: 25px !important;
padding: 0px !important;
}
i.laravel { color: #f05340; }
i.wordpress { color: #21759b; }
i.sass { color: #cd6799; }
img {
width: 50px;
height: 40px;
margin: 10px !important;
padding: 0px !important;
}
h2 {
margin: 0px !important;
padding: 0px !important;
}
p {
width: 95%;
margin: 0px auto 0px auto !important;
padding: 0px 0px 10px 0px !important;
}
}
}
}
#media only screen and (min-width: 768px) {
section.hero {
img.hero-responsive {
width: 450px;
}
h2 {
width: 400px;
top: -80px;
}
}
section.info {
top: auto;
position: absolute;
}
}
#media only screen and (min-width: 1000px) {
section.hero {
h3 {
top: -30px;
}
}
section.info {
min-height: 500px;
position: unset;
margin-left: -5px;
}
}
codepen: https://codepen.io/aparker611/pen/bGbQdqg
codep: https://codepen.io/aparker611/pen/bGbQdqg
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
You can try using flexbox. if you share a codepen or a full example it will more easy to help you
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
https://codepen.io/centrodph/pen/gOYQpBL
Related
I am really breaking my head here. When I look at the following bootstrap 3 card on my mobile, I can see that I can move the webpage to the left and right. I therefore conclude there is something wrong in my CSS.
I have been looking for hours now, but cannot understand where the error is. Can somebody help me out figure out this problem?
The demosite is here
I cut a lot of html away there is not relevant for the question. Therefore there is some css classes that is not used in the following html.
body {
background-color: #f5f5f5;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
/*height: 400px;*/
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
/* Set width between grid elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.header-textbox-bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.card-content {
display: flex;
padding: 10px 10px;
justify-content: space-between;
align-items: flex-end;
}
.card-content__info {
display: flex;
flex-direction: column;
left: 3em;
position: relative;
}
.card-content__info > h4 {
padding: 0 !important;
margin: 5px 0 !important;
text-transform: uppercase;
}
.sub-headline {
color:#00a9ff !important;
text-transform: uppercase;
font-size:20px;"
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.index-content .card img {
height: 100%
}
.card-content__info {
flex-direction: column;
left: 0;
}
.card-content {
flex-direction: column;
left: 20px;
position: relative;
align-items: inherit;
}
/* Position button on banner with textbox */
.header-textbox-bottom-left {
position: static;
bottom: 8px;
left: 16px;
text-align: left;
padding-left: 20px;
padding-bottom: 5px;
}
.btn-custom {
position: static;
width: fit-content;
margin-top: 15px;
}
.btn-success {
width: fit-content;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
/* GRID ELEMENTS MEDIA QUERIES */
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p,
.card-content span {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
.card-content-textbox {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
/*right: 0;*//* top position on right*/
margin: 15px;
max-width: 300px;
height: 91%
}
}
<div class="container">
<!-- Partnerværksteder -->
<div class="row">
<div class="col-sm-12 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="https://s-media-cache-ak0.pinimg.com/originals/87/bf/cf/87bfcfb36780c0fec472d8d301be7a1c.jpg"></img>
<div class="card-content">
<div class="card-content__info">
<h4>Højt serviceniveau og kvalitet</h4>
<span class="sub-headline">Find nærmeste mercedes partnerværksted</span>
</div>
<button type="button" class="btn btn-success bottom-right btn-custom">Find et værksted</button>
</div>
</div>
</div>
</div>
</div>
</div>
Follow an image that show the div broken your layout.
You will need to change this parts of your css.
// Remove all comments styles
.card-content {
display: flex;
padding: 10px 30px;
justify-content: space-between;
/* align-items: flex-end; */
}
#media (max-width: 768px) {
.card-content {
flex-direction: column;
/* left: 20px; */
/* position: relative; */
/* align-items: inherit; */
/* max-width: 100%; */
/* width: 100%; */
}
}
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 5 years ago.
I am making a common header and footer which will be used throughout in all the HTML pages. My page has a white header and white footer and the body is grey colored. Now, my work demands to achieve as below:
What I achieved so far is as below:
I don't know why I am getting these white strips in the sides of the body tag. Please suggest, my code is as below.
main {
background-color: lightgrey;
padding: 50px;
}
header {
background-color: white;
width: 100%;
height: 50px;
}
.content-section {
background-color: lightgrey;
width: 100%;
}
.logo {
height: 20px;
margin: 15px 5px;
width: 116px;
}
.open-card-BG {
font-weight: 300;
margin: 0 auto;
width: 65%;
padding: 20px 40px;
object-fit: contain;
max-width: 325px;
min-height: 200px;
border-radius: 5px;
display: table;
background-color: white;
position: relative;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
.open-card-BG::after {
content: '';
position: absolute;
top: 30px;
left: 100%;
width: 30px;
height: 30px;
background: url(../secure.svg) center no-repeat;
background-size: contain;
}
<header>
<img class="logo" src="logo.gif" />
</header>
<main>
<div class="open-card-BG">main content</div>
</main>
<footer>
I am footer
</footer>
That is because of the default (user agent stylesheet) margin applied by the browser on the body tag - see how the white stripes vanish when I set margin: 0 for body.
Demo below:
body {
margin: 0;
}
main {
background-color: lightgrey;
padding: 50px;
}
header {
background-color: white;
width: 100%;
height: 50px;
}
.content-section {
background-color: lightgrey;
width: 100%;
}
.logo {
height: 20px;
margin: 15px 5px;
width: 116px;
}
.open-card-BG {
font-weight: 300;
margin: 0 auto;
width: 65%;
padding: 20px 40px;
object-fit: contain;
max-width: 325px;
min-height: 200px;
border-radius: 5px;
display: table;
background-color: white;
position: relative;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
.open-card-BG::after {
content: '';
position: absolute;
top: 30px;
left: 100%;
width: 30px;
height: 30px;
background: url(../secure.svg) center no-repeat;
background-size: contain;
}
<header>
<img class="logo" src="logo.gif"/>
</header>
<main>
<div class="open-card-BG">main content</div>
</main>
<footer>
I am footer
</footer>
add body{margin:0} in your stylesheet.
By default body tag have margin of 8px in most major browsers.
body{
margin:0
}
main {
background-color: lightgrey;
padding: 50px;
}
header {
background-color: white;
width: 100%;
height: 50px;
}
.content-section {
background-color: lightgrey;
width: 100%;
}
.logo {
height: 20px;
margin: 15px 5px;
width: 116px;
}
.open-card-BG {
font-weight: 300;
margin: 0 auto;
width: 65%;
padding: 20px 40px;
object-fit: contain;
max-width: 325px;
min-height: 200px;
border-radius: 5px;
display: table;
background-color: white;
position: relative;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
.open-card-BG::after {
content: '';
position: absolute;
top: 30px;
left: 100%;
width: 30px;
height: 30px;
background: url(../secure.svg) center no-repeat;
background-size: contain;
}
<header>
<img class="logo" src="logo.gif"/>
</header>
<main>
<div class="open-card-BG">main content</div>
</main>
<footer>
I am footer
</footer>
you can try giving the main tag a margin: 0 -10px, may solve your problem.
See the fiddle
you can add this code in your css:
body {
display: initial;
}
Try the following:
html, body {margin: 0;}
I have a problem with my css file. The styles are not being applied for iPhone, instead I get the iPad queries applied for both iPhone and iPad. I have checked and checked for typos and cannot find any. Here is my css file for both iPad and iPhone queries:
css
/*MEDIA-QUERIES-iPAD////////////////////////////////////////////////////////////////////////////////*/
#media screen and (min-width: 768px) and (max-width: 1024px) {
body,
html {
position: fixed;}
#menu {display: none;}
#presentacion {
padding: 0;
position: fixed;
display: inline-block;
text-align: center;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
.buttons {
opacity: 1;
}
#previous {
background-position: 70px 45%;
-webkit-tap-highlight-color: transparent;
left: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#next {
background-position: 110px 45%;
-webkit-tap-highlight-color: transparent;
right: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#info {
font-size: 2em;
}
h1 {
line-height: 8vh;
font-size: 2.1em;
}
ul {
margin-right: 2em;
}
#front {
height: 750px;
}
#imagewrap {
top: 10%;
display: block;
margin: 0 auto;
width: 80%;
height: 80%;
}
#front {
background-color: red;
}
#header {
height: 8vh;
}
.sections {
width: 900px;
height: 500px;
margin: 0 auto;
overflow-y: hidden;
top: 5%;
padding: none;
}
.sections p {
font-family: Galliard;
display: block;
font-size: 1.1em;
line-height: 2em;
margin-bottom: 2em;
padding-right: 100px; /*important*/
padding-left: 100px; /*important*/
color: #666;
text-align: left;
}
#about.sections {
height: 650px;
}
#about.sections p {
padding-left: 125px;
padding-right: 125px;
}
.littleImages {
height: 125px;
width: 125px;
margin: 15px;
box-shadow: 0px 0px 15px 5px #dcdcdc;
}
}
/*MEDIA-QUERIES-iPHONE////////////////////////////////////////////////////////////////////////////////*/
#media screen and (min-width: 375px) and (max-width: 767px) {
#front {
z-index: 6;
margin: 50% auto 0;
height: 85%;}
#container {
position: relative;
height: 100vh;
width: 100vw;
background-color: green;
overflow-y: scroll;
text-align: center;
}
#imagewrap {
margin-top: 400px;
}
#header {
height: 20vh;
background-color: red;
}
.sections {
width: 900px;
height: 650px;
margin: 0 auto;
overflow-y: hidden;
top: 15%;
padding: 50px 50px 50px 50px;
}
.sections p {
font-family: Galliard;
display: block;
font-size: 1.1em;
line-height: 2em;
margin-bottom: 2em;
padding-right: 100px; /*important*/
padding-left: 100px; /*important*/
color: #666;
text-align: left;
}
.buttons {
opacity: 1;
}
#info {
font-size: 2em;
}
#about.sections {
height: 650px;
}
#about.sections p {
padding-left: 125px;
padding-right: 125px;
}
.littleImages {
height: 125px;
width: 125px;
margin: 15px;
box-shadow: 0px 0px 15px 5px #dcdcdc;
}
#previous {
background-position: 70px 45%;
-webkit-tap-highlight-color: transparent;
left: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#next {
background-position: 110px 45%;
-webkit-tap-highlight-color: transparent;
right: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
}
I don't see any clear typos or mistakes that would prevent the code from running. Why would the media query not work? Any help appreciated. Thank you.
Could this be due to not setting a viewport: https://www.w3schools.com/css/css_rwd_viewport.asp At least I don't see any viewport in your code.
Also; I've always learned to have separate stylesheets per screentype; it's easier to maintain and mobile users don't have to pull in the unnecessary IPad css.
To do this I place my mediaqueries inbetween the head tag together with a viewport. Each mediaquery is linked to a separate .css file
Here's an example of an HTML file that uses two styles. I believe you can expand mediaqueries by using 'and' which will allow you to use a specific stylesheet for a screensize between a min and max.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="reset.css" type="text/css"> <!-- My CSS reset -->
<link rel="stylesheet" href="style.css" type="text/css"> <!-- My main style, also for PC... -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" /> <!-- Mediaquery that detects mobile screens and serves them the other stylesheet-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- viewport -->
</head>
<body>
<p>Responsive text goes here.</p>
</body>
</html>
This is the website I'm currently working on and my problem is that I can't seem to find a way in which to set the footer at the bottom of the page under all the elements. I want the footer to have a position:fixed, but for it to be under the next page element that is at the bottom of the page.
Some of the code:
#footer {
clear: both;
margin: 0 auto;
position: fixed;
text-align: center;
bottom: 1%;
height: 6%;
width: 100%;
padding: 2%;
z-index: 500;
background-color: rgba(0, 0, 0, 0.6);
}
.content {
overflow: hidden;
background-color: #ffffff;
margin: 70px 0 0 0;
}
.content-middle {
float: left;
width: 50%;
}
.content-left {
float: left;
width: 56%;
}
.content-right {
float: right;
width: 60%;
}
Update Style using margin-bottom
#pagination
{
display: block;
text-align: center;
margin: 0 auto;
clear: both;
padding: 0.4% 0;
background-color: rgb(255, 255, 255);
color: #999;
font-size: 11px;
text-transform: uppercase;
margin-bottom: 150px;
}
Add remove White space then update style using height: auto !important;. because after your search result your li or class="reteta" set height:350px
#retete.simple-style li.reteta {
width: 98%;
max-width: 680px;
min-width: 280px;
height: auto !important;
float: none;
display: block;
background: none;
box-shadow: none;
}
or other wise only simple add style
#retete.simple-style li.reteta {
height: auto !important;
}
You can achieve this by adding a margin-bottom: 90px; to #pagination.
#pagination {
margin-bottom: 90px;
}
You can achieve this by adding a bottom: 0px; to footer
#footer {
clear: both;
margin: 0 auto;
position: fixed;
bottom: 0px
text-align: center;
bottom: 1%;
height:6%;
width: 100%;
padding:2%;
z-index:500;
background-color:rgba(0, 0, 0, 0.6);
}
The only diff is bottom:0px; .Try this
Whats going on with my site at minimized widths and how can I fix it?
Problem
It looks good on a mobile phone and full screen, but when sizing down, my background image disappears and the top bar seems to be acting weird (with the logo doing crazy stuff) at around 600ish pixels.
My #media query code:
#media only screen and (min-width:1024px)
{
div.large-7.push-5.columns.last{
height: emCalc(1px);
}
}
#media only screen and (max-width: 1023px) and (min-width:675 px){ //745 //481
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
//overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
.top-bar{
// overflow: hidden;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
}
#media only screen and (max-width: 674px) { //480
// .title-area {
// max-width: 40%; //or whatever you need for your layout. px will work there, too
// }
// .title-area .logo {
// width: 100%;
// height: auto;
// }
#icons .hover1 {
.iconlinks {
color:$iconcolor1;
}
}
#icons .hover2 {
.iconlinks {
color:$iconcolor2;
}
}
#icons .hover3 {
.iconlinks {
color:$iconcolor3;
}
}
.path-container .path-item .circle.circle-right {
right: 90px;
}
.path-container {
text-align: center;
}
.path-container .circle {
top: 0;
// right: 0;
// left: 0;
float: none;
margin-bottom: 30px !important;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
.top-bar {
overflow: hidden;
}
.orbit-container{
height: 12.5rem;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
/*background-color: #ccc;
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
//height: 65rem; /*645px*/
// background-color: blue;
}
.servicesminicontainer{
margin-top:emCalc(0px);
}
.serviceimgs{
margin: emCalc(0px) auto;
}
.servicescontainer{
/*background: linear-gradient(to bottom, yellow, magenta);*/
// height:40rem; /*645px*/
overflow: hidden;
background: none;
/*background-image: url('../img/laback.jpg');*/
background-size: 100%;
//background-repeat: no-repeat;
// background-color: rgba(30,144,255, .7)
//background: linear-gradient(to bottom, $background-color-top, white);
//background-image: url('../img/losang.jpg');
}
#icons{
position: relative;
top: initial;
margin-top: 50px
}
.logo{
width: 50%;
// position:relative;
// top:emCalc(-27px);
}
#topbutton{
position: relative;
top: 2rem;
}
#icons{
/*position: relative;
top:6rem;*/
}
.container1 p, h4{
color:black;
}
header{
margin-top: 0rem;
background-image: none;
}
}
I am not sure try with the following styles. Hope it will fix the top header issues.
#media only screen and(min-width:500px) and (max-width: 600px)
{
.top-bar .name
{
height:auto;
}
.top-bar
{
height:5rem;
}
}