I've a html page wherein I display a table with data from the database along with a footer at the bottom of the page.
The problem is that with smaller screens (around less than 760px) the footer, instead of being at the bottom, goes upwards and thus overlaps and hides a portion of the display data.
I want that irrespective of the screen size, the footer should always be placed at the bottom of the page.
My code snippets are mentioned below. Request you to please provide a solution.
Edit 1: A (static) scenario is available at the codepen url (please check out for smaller screen sizes): http://codepen.io/abbor123/pen/YGwVXg
The footer element:
<div class="footer">
<div class="container">
<p>Designed & Created by AB </p>
<p><i class="fa fa-lg fa-creative-commons" aria-hidden="true"></i> Some Rights Reserved </p>
</div>
</div>
CSS:
.footer
{
clear: both;
position: relative;
z-index: 10;
height: 8em;
margin-top: -5em;
padding-top: 2.5em;
background: #009933;
text-align: center;
}
body
{
background:url(image.png) no-repeat center center fixed;
background-size: cover;
font-family: 'Exo 2', sans-serif;
color: black;
}
#media (max-width: 770px)
{
#table-display
{
font-family: 'Exo 2', serif;
text-shadow: 4px 4px 4px #aaa;
text-align: left;
color: black;
margin-top: 60px;
border-collapse: collapse;
width: 100%;
}
}
To fix the footer problem, remove the height: 60em; from the .row class. It's at line 68 in the CSS for CodePen. http://codepen.io/FluidOfInsanity/pen/gwvZLN?editors=1100
Also, would you want to remove the top: 6px; from the td:before? Maybe your example is just a quick mock-up, but it throws off my example.
Related
There's a small gap between all my content on my website and the end of the browser window, and I can't figure out why it's there. This is what my CSS code looks like for my Hero Image.
And this is my HTML for that image, as well as for a banner underneath the image with which I have the same separation problem.
.container {
position: relative;
text-align: center;
color: white;
}
.full-width-banner {
position: auto;
background-color: #466995;
padding: 200px;
top: 20px;
text-align: center;
height: 100px;
text-height: 40px;
width: 73%;
overflow: none;
color: white;
font-family: 'Oswald', sands serif;
font-size: 20px
}
<div class="full-width-banner">
<h2> “Change will not come if we wait for some other person or some other time. We are the ones we’ve been waiting for. We are the change that we seek.” </h2>
<p>Barack Obama<p>
</div>
This is a picture of what that creates, an empty gap between the image and the end of the browser page on the left side. The picture is supposed to completely cover its portion of the browser with no border on either side.
I don't know why this is happening or how to fix it.
By default your browser will add a few px of margin or/and padding to your body, just make sure to cleanse that at the beginning of your CSS like so:
body {
margin: 0;
padding: 0;
}
img {
display: block;
}
<img class="full-width-banner" src="https://ijnet.org/sites/default/files/styles/full_width_node/public/story/2020-07/cooper-baumgartner-J9QvzfkQM44-unsplash.jpg?h=8c0e36cd&itok=F6g99LH1">
I am trying to improve my css(and html) skills by trying to re-create the homepage of reddit.
The problems I have are the sidebars simply won't stay where they are supposed to be when resizing the browser window, they go up and the width is also changing.
The way it is on my end: https://imgur.com/a/SrfyP (Look at the right side things)
The way it should be: https://imgur.com/a/iBEX3 ( They always stay on the same width and height)
HTML for just the blue bars on the right side which say "Submit a new link"(in the imgur link). I assume if I can get one of them to work I can get all the other elements to work properly too.
<div class="container">
<div class="div1">
Submit a new link
</div>
<div class="div2">
Submit a new text post
</div>
</div>
CSS:
html, body{
margin: 0;
padding: 0;
width: 100%;
}
.container{
display: block;
margin-top: 8%;
margin-left: 87%;
width: 8%;
}
.div1, .div2 {
display: inline-block;
margin-top: 5%;
background: rgb(212, 229, 245);
height: 100%;
padding: 7px;
width: 199%;
text-align: center;
margin-left: -53%;
border-radius: 10px;
border: 1px solid #c4dbf1;
font-size: 150%;
font-weight: bold;
letter-spacing: -1px;
font: normal medium verdana,arial,helvetica,sans-serif;
}
.div1 a, .div2 a{
font-weight: bold;
text-decoration: none;
}
I tried so many possibilities, messing with position, display, float, width, margins. This question has been answered a million times but I couldn't find something that helps me.
Thank you for your time.
I have a footer like this and the code is as follows:
<div class = "footer">
<hr>
<div class="beian">company <a target="_blank"
href="URL">company number</a>
</div>
</div>
CSS
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 50%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #808080;
border-bottom: 1px solid #aaaaaa;
}
.beian {
font-size:11px;
text-align: center;
}
I want to fixed the footer vertically at the bottom while not affecting the page content
the initial code is
.footer {
bottom : 2px;
height : 40px;
margin-top : 40px;
text-align: center;
vertical-align: middle;
position:fixed;
width:100%;
left:10%
}
But this setting does not work good in
1: when the viewport is small ( it will mess with the page content)
2: in iphone's landscape mode ( it will again overlap with the content)
So my solution is :
1:when the viewport is smaller than 1000px, apply setting A
2:when the viewport is larger than 1000px & mobile portrait mode, apply setting B
My issue:
1: when the viewport is larger than 1000px the footer is not centered
2: the footer is not fixed to the bottom in mobile portrait mode.
The fiddle : https://jsfiddle.net/h6tkgbb8/
Sorry for the delay and my confusing question. I was not able to get my head straight. What I needed ultimately was to get the footer sticky. I found this link and it solved my problems.
https://css-tricks.com/couple-takes-sticky-footer/
HTML:
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
Based upon the screen size, the whitespace increases/decreases between the image and blog title:
How can I make them touch at all times?
HTML
<img class="main-image" src="/assets/walking.jpg">
<div class="overlay-image">
<div class="blog-caption">
A DAILY BLOG ABOUT THE
JOURNEY & CHALLENGES
</div>
<%= render 'subscribes/subscribe.html.erb' %>
</div>
<div class="blog-page">
Blog post title & text.
</div>
css
main-image {
width: 100%;
position: relative;
}
.overlay-image {
position: relative;
text-align: center;
margin-top: -47%; # I think this is the main culprit, but I don't know how to edit without altering the position of the things on the image
height: 201px;
}
.blog-caption {
text-align: center;
font-size: 18px;
color: white;
margin-top: 0px;
margin-bottom: 18px;
padding-top: 8px;
background-color: rgba(44,62,80, 0.8);
padding-bottom: 8px;
}
.blog-page {
#media (max-width: 992px) {
padding-top: 0px;
margin-top: -40px;
}
}
Yes, as you already suspected: First remove the negative margin from .overlay-image. Then add position: absoulte to .blog-caption and adjust its position with the top and left settings.
Maybe you should look at z-index.
Then you can put the image into the container for the fancy text which is in the class .overlay-image yet.
With this, you get rid of those -x% margin. Maybe this can help you figure out the problem.
We have a Wordpress site at http://cmagics.eu/digitalmagazinepublishing which uses the responsive2 theme. We are trying to get a sticky header which seems to work just fine, however we are also trying to get a sticky footer which simply sticks to the bottom of the page and works like the one at http://ryanfait.com/sticky-footer/
Because of the slightly cryptic nature of the responsive2 theme how can I;
1. keep the footer stuck at the bottom of the page using the correct sticky method not position:fixed
2. Stop the main content scrolling unnecessarily when there is plenty of room on the page?
html source:
view-source:http://cmagics.eu/digitalmagazinepublishing/
css
#footer {
position: relative;
clear:both;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align:center;
margin-top: -324px; **just a hack to make the footer appear at the bottom incorrectly**
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
}
#site-container {
width: 900px;
margin: 130px auto 0 auto;
overflow:auto;
padding-bottom:162px;
}
.hfeed {
min-height:100%;
height:100%;
height: auto;
}
Here's a solution that I think is very clean. Use absolute positioning for all of your main content elements (header, article, footer). Use #media queries to create breaks at different resolutions if you need to have the header or footer height change for different screen widths (responsive design), and tell your main content area to hide overflow. You can use floated, relative layouts within the main content areas this way, as well.
Here is footer css :-
#footer {
position: fixed;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align: center;
margin-top: -324px;
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
bottom: 0;
width: 100%;
}