I can't seem to find a way to keep my footer at the bottom of the page when the user zooms to or so 25%. But keep it in the right place when the user has the default zoom. I can just delete the whole footer section and it works for default zoom. I've been reading a lot but can't seem to get it working.
Here are some screenshots of what I mean:
.footer {
background-color: #171717;
bottom: 0;
width: 100%;
padding: 25px 0;
margin-top: -3em;
}
More context:
html {
height: 100% !important;
}
body, html {
position: relative !important;
}
body {
min-height: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
overflow-x: hidden !important;
color: #838282;
font-family: 'Open Sans', sans-serif;
}
I am using bootstrap. Please, any idea is appreciated, thanks.
Related
When i zoom out the header doesn't take up the full-width of the page. I have two images the first is how it is supposed to look when zooming out and the second one is where it doesn't take up the full width.
Picture 1 :
Picture 2 :
I have tried with width:100% in the header, but it doesn't work.
* {
padding: 0;
margin: 0;
box-sizing: border-box;}
html {
width: 100%;
max-width: 1600px;
margin-left: auto;
margin-right: auto;
background-color: #000;
font-family: 'Lato', sans-serif;
font-size: 62.5%;
line-height: 1.2;
color: #fff;}
header {
background-color: var(--background-color);
width:100%;}
Edit 1:- Change margin-left to 0px and margin-right to 0px. make max-width: 100%;.
html {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
background-color: #000;
font-family: 'Lato', sans-serif;
font-size: 62.5%;
line-height: 1.2;
color: #fff;
}
Edit -2 :-
as far as i understood , your problem now is to set the other sections centered. follow this how to center things in css . If it sill doesn't solve the problem please edit the above fiddle accordingly and specify the requirements clearly (like using id's)
Edit -3:-
Please follow the sample fiddle.
fiddle
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 4 years ago.
CSS code of my body and my footer in this moment:
I just can't to fix my footer at the bottom of my page. I read a lot of solutions present of www but any works for me. Thanks for help me!
body {
background: #ffffff;
color: #737f85;
font-family: "Tahoma", Tahoma, Arial, sans-serif;
font-size: 100%;
line-height: 25px;
font-weight: 400;
padding: 0;
}
.footer-sidebar {
background-color: #ccff66;
margin: 0;
padding: 55px 0 0px;
width: 100%;
height: 100%;
text-align: justify;
}
Can you put your demo code on codepen.io?
Anyway, you can try this to make your footer always stay in bottom:
body {
background: #ffffff;
color: #737f85;
font-family: "Tahoma", Tahoma, Arial, sans-serif;
font-size: 100%;
line-height: 25px;
font-weight: 400;
padding: 0;
height: 500px; /*remove this, I just put it here to make it clear*/
}
.footer-sidebar {
background-color: #ccff66;
margin: 0;
padding: 55px 0 0px;
width: 100%;
text-align: justify;
/*add this*/
position: fixed;
bottom: 0;
}
<div>
this is some text
</div>
<footer class="footer-sidebar">This is footer</footer>
If the footer is cover a part of body, put padding-bottom: 100px with 100px is the height of your footer
There isn't enough content in the content-section(The space between header and footer).
Specify the height of Site Content Section.
.site-content {
height: 100vh;
}
Ok, so I've been making a website and a problem that I had with it is that the inner div #content wasn't expanding to the full size of the page, letting text flow over in a sloppy manner that made it hard to read over the background image.
I used overflow: auto; to fix my problem, but now there's a scrollbar that I didn't want on the page.
Here's the parts of the CSS that manage the body, html, and #content elements (#content is a div).
body, html {
height: 100%;
font-family: Helvetica, Arial, sans-serif;
}
body {
background-color: black;
color: white;
background: url('c12background.jpg');
}
#content {
height: 100%;
width: 80%;
margin: auto;
padding: 5px 5px 5px 5px;
background-color: black;
overflow: auto;
}
Add margin:0;
body, html {
margin: 0; /* ADD */
height: 100%;
font-family: Helvetica, Arial, sans-serif;
}
You dont have to include overflow in your #content, instead add word-wrap in your P tags:
p,a,li{
word-wrap: break-word;
}
I have an 8 pixel border that I'd like to increase, but I can't find where it's coming from. Also, if I use margin, it disproportionally adds to the border.
The CSS and the entire project is available here:
CSS Resume Project
#font-face {
font-family: "Open Sans";
src: url(Open_Sans/OpenSans-Regular.ttf);
}
.global {
/*border: solid 10px lightgray;*/
border-radius: 25px;
font-family: 'Open Sans', sans-serif;
background-color: white;
/*position: absolute;*/
top: 20px;
margin-bottom: auto;
padding-bottom: 20px;
right: 20px;
left: 20px;
align-self: center;
}
h3 {
font-weight: 300;
}
p {
font-weight: 300;
}
body {
background-color: lightgray;
}
Any help or even a pull request would be greatly appreciated. Thanks.
because it has a margin set by default and the user-agent-stylesheet looks something similar to this:
body {
display: block;
margin: 8px
}
so , simply reset margin in body
body {
margin:0
}
body element has 8px margin set as default by browsers.
You just need to change the margin of the body tag
body {
margin:20px;
}
You can reset/normalize your code by adding this code !
body {
margin: 0
}
i have a full screen image set in Html and want to add overlaying text.
my CSS looks like
.video {
position: fixed;
left: 0px;
top: 0px;
z-index: -100;
min-height: 100%;
min-width: 1040px;
width: 100%;
height: auto;
/*overflow: hidden;*/
}
.maintext {
color: #CCC;
z-index: 100;
font-size: 24px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-variant: small-caps;
font-weight: normal;
}
.rightcolumn {
float: left;
width: 50%;
}
.leftcolumn {
float: left;
width: 40%;
margin-left: 10%;
}
i want my left and right columns to show over the video that is playing in the background. I have the video on a full screen loop in my html code.
All in all i ideally would want something that looks like this
http://www.joe-san.com/
z-index needs to be on relative or absolute positioned elements:
.maintext {
position: relative;
color: #CCC;
z-index: 100;
font-size: 24px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-variant: small-caps;
font-weight: normal;
}
I think you're on the right path and you probably forgot the height on both columns.
Have a look at my code -> http://jsfiddle.net/uN7Db/
The trick is to make sure that both <html> and <body> elements stretch to 100% height. Once you're done with that you can style the video element in the background (like the one you wrote) and than you can continue writing your html like any other page.
Also, there is no need to declare height:auto in .video.