My website is thoughtshouts.com running on WordPress using VOICE THEME (by Meks). For some of the pages that are short, the footer appears in the middle of the screen for all devices. I explored some other websites too running on the same theme but not witnessed the same issue. I am skeptical that this might be some issue with WordPress or theme compatibility, not very sure. I explored help forums giving a common remedy setting as
.site-footer{
position: absolute;
bottom: 0px;
}
After making the above CSS change, this works for that particular page where the issue is, but for other website pages, the footer comes somewhere in between content overlapping the content screen. I wish the footer to fixed at the end of every page, posts where it only appears when content is scrolled to the last.
Problem Page link: https://thoughtshouts.com/publish-content/
Please guide me with the required code to fix this issue.
This isn't really an issue with your sites codes or CSS.
This template like many other themes that use best practice headers and footers to house content wraps the headers and footer around the content of the page.
The real issue here is the content in your page.
Can I suggest that you re think your approach to the UI of this page such as the following:
Increasing the padding above and below your main content
Add more content to the page to increase the body height
By default show the login form on this page so regular users dont have to click Login. Then have an additional link to your sign up page.
The simplest solution will ba add min-height of whole screen but footer and header height to your #content wrapper.
#content {
min-height: calc(100vh - 131px - 58px); // screen size minus header minus footer
}
Also need to check every media queries since footer/header height may be changed. If you have no worries about extra empty space after content just use
#content {
min-height: 100vh;
}
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
Basically, I made the post boxes smaller (height and width) on my tumblr's main page so that users won't have to scroll down to read through blogs. I tend to write lengthy blogs. What I did was lowered the height and width of my post boxes, added an overflow:hidden property (so that my lengthy texts won't go outside the divs), and permalinked them so that they can read the full posts on another page instead.
My problem is, since I adjusted the height and width of the post box on the main page, the height and width of the post box on the redirected page is also the same. My question is, there a way that I can just adjust the post box height and width ONLY on my main page and not on redirected pages?
Yes, find the class or id of the body tag for your main page. (if it has one, if not you would just need to add one)
for example if the home page has this (you can find this easily by viewing page source and looking for the opening body tag)
<body class="home-page">
you could do this
.home-page .each-post {
width: 100px;
height: 100px;
overflow: hidden;
}
So that would only change the .each-post on the .home-page, and the .each-post css would stay the same on the other pages.
My <footer> tag will not seem to stay at the bottom of my page. I have tried several different techniques to fix it and none have worked.
I have included the link to my working site below.
http://stage.bmdigitalgroup.com/recipes.html
i think you want to put your footer at bottom of the page i any resolution, if am i right than here is answer.
.footer {
position:absolute;
border:0px;
}
for more tips, tricks and tutorial visit - blog.klassicweb.com
Based on your screenshot, it looks like your monitor's height is larger than your website's content or you have zoomed out a lot, so what you're seeing is totally normal. In a smaller monitor it would look just fine. You could add a min-height: rule to your sites container so it pushes the footer down to the specified value, but you need to figure out a min-height that makes sense to you and your users.
If you really want to make the footer always stick to the bottom regardless of the monitor's height or zoom level, then you could add the following rules - just keep in mind that in a page where there isn't much content, you will end up forcing users to scroll down for no reason if they need to get to the footer:
/*
This rule is already in your stylesheet.
I added it here just for reference.
*/
html, body {
height: 100%;
}
/*
This is the container that holds your whole site.
You should use an id like "#container" or "#site" so this rule
applies only to your site's main container.
*/
.container_12 {
min-height: 100%;
}
I'm giving new life to a boring web page. Please see what my template should look like here: Correct body page
Pretty page!
Now - when I go to add my existing background / menu/ footer - I am somehow loosing my container image -
/* structure */
.container {
background: url(/img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 702px;
position:relative;
}
I removed position:relative; (but it still failed). Please note I'm having to use a web content manager only because I have no other access to site. For this reason - my css sheet is in the middle of the page.
This is how the page looks now w/missing bgcontainer.gif:
Current page
Please help - thank you
With the help of firebug I can see that the html structure of the two pages is quite different. On the "good" one you have a ".container" div as a wrapper of most of the content, you can see it here with the black border:
But on the "wrong" one you have a "#container" div in the same position and another ".container" div further down, nested inside that "#container", and it wraps that header only.
The "#container" div of the "wrong" page spans the whole witdh.
By the way, I like your design.
EDIT:
This is the look of the page with float: left; and left:107px; added to the ".container" div.
Here's your biggest problem:
The structure of the HTML pages is MUCH too different to pin this problem on one single line of code. In the "old" page there are 5 stylesheets including your own; in the "new" page there is only one stylesheet.
The reason your old and new pages don't look the same when you add your default.css stylesheet is because the old page has FOUR other stylesheets also applying styles, many of which are overriding your own.
[Update]
I actually compromised on this problem for now by foregoing the fixed footer design.
It seems that there is no problem with dynamic content moving the footer and resizing containers appropriately unless the footer is fixed to the browser bottom initially.
I hope others will eventually provide a great solution that encompasses the best of both worlds.
I spent all day trying to get the footer to move down the page to accommodate dynamically added (via ajax) content. I really need some pointers or links because I haven't found anything that helps.
Basically:
My site has some pages that begin with only a text box and a button so that the total height of the content area is only a few inches beneath the header area.
I don't have any problem getting the sticky footer working so that the footer appears at the bottom of the browser window even when there is very little content on screen.
That same css layout works fine for other pages that have content that extends beneath the browser window.
The catch:
The content has to be rendered and passed to the browser with the initial load.
The Problem:
Any content that is added to the page via AJAX after the initial load paints down the page correctly -- but the footer remains in its initial location.
Please tell me there is a fix for this.
I can't post the css until checking with my boss first - if possible - and if needed, I will later - but it's just a very basic version of the many sticky footer css solutions floating around the web.
Thanks.
Currently fixed similar situation with small jQuery and CSS, where parameter is footer div object (i.e. $("#mainfooter")):
function positionFooter(obj){
if ($("body").outerHeight(true) > $(window).height()) {
obj.css("position","relative");
} else {
obj.css("position","fixed");
obj.css("bottom","0px");
}
}
Bound this function to $(document).ready and $(window).resize.
If ajax call resizes body, this should be called also after content load.
It sounds like your footer is using display: fixed or similar. Try changing the container of your footer to:
bottom: 0;
display: block;
position: absolute;
That will ensure it appears right at the bottom of whatever container it sits within (I'm assuming the <body> tag). Your problem now becomes ensuring that it appears at the bottom of the screen rather than the bottom of your document, which starts of being much shorter. You could accomplish this in a couple of ways, but perhaps the easiest would be to set a minimum height on your AJAX content container:
min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */
The other approach is since you're using a JavaScript library (I assume?) to grab the required content, perhaps you could also adjust the height of the AJAX content container or change the footer's CSS once that content has loaded?
Without any code it´s hard to tell what the problem might be.
However, I´m using a sticky footer as described here that works very well although I haven´t added ajax content in it. Browser resizing works just fine though.
Use include in PHP and call the footer after the dynamic content appears.
I'm not sure you are looking for this, but I am also facing the same problem before and same CSS, where my content overlaps on the footer when i call the ajax through jQuery method.
Now I found the solution: Just get the div height through jQuery and apply the height to the div where you are returning your results from ajax.
var obj = $("#viewcomm").height();
if($.browser.msie) {
$("#viewcomm").height(obj).css({cursor:"auto"});
}
where here viewcomm is div ID.
I solved same kind of problem with following code, where content is the id of div where php pages load and footer is the footer tag.
var footerAdjustId = setInterval(adjustFooter, 2000);
function adjustFooter(){
$("footer").css("marginTop", $("#content").height() - $(window).height());
clearInterval(footerAdjustId);
}