I'm having a problem with a huge gap in between the content and the footer ad. I can't quite figure out how to fix it. I suspect it may be to do with the content on the right as it is generated by another site (indeed.com).
Here's the link:
http://www.immediatestarts.co.uk/
Much appreciated if anyone can help.
It is actually the Javascript file you are embedding within that is writing an iframe out to the screen with a height of 2000px. I'm guessing you don't have control over that since it's coming from a third-party site, so you could try writing a CSS rule on your page to control the iframe, such as
#indeedjobs iframe {
height: 1000px;
}
Edit: Alternatively if that isn't working, you could just set the height of #indeedjobs itself to height:1000px, then set overflow:hidden on the div as well if you want to prevent the iframe from spilling outside of it.
You're putting a height of 2000px onto the iframe, in an inline style (ie <iframe style="height: 2000px"> - remove that, and it'll be fine.
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!
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;
}
So I've been tinkering with this site, and I've got my work cut out, but right now I cannot for the life of me workout why content is displaying beyond the width of the window.
-redacted-
I believe it's something to do with bootstraps row/col guttering but have been unable to fix it, even with dreaded '!important' use.
Furthermore i note that a carousel button is extending beyond the width of the screen.
This basically just makes the site flimsy and seem broken.
Any css whizz out there able to give me some tips of this shit?
If the problem is with one specific tag (e.g. a <div>), add a class/id to that div with the following CSS: .classname { overflow-x: hidden; If it's the whole page, you might want to do that for the body and HTML tag. Note: When you do this last thing, people aren't able at all to scroll horizontally. This is a but user unfriendly, so you want to use that only if it's the only way out in my opinion.
I have used Accordion and Slideshow on my site.
http://www.delightbranding.com/
when you click Play. For some reason the scroll bar appears shifting the page.
Guess i am missing setting height for some div. Please help.
This one seems to be the bad apple:
<div class="control-next">
When the "Play" item is selected, this div expands below the HTML content, causing your page to grow.
Remove the height from .control-next css class
.control-next {
position:absolute;
right:0;
top:201px;
bottom:201px;
/*height:432px;*/
}
this is only happening for me in IE9 (I'd wager all versions of IE) and only when my browser window is short.
I tend to add a CSS rule to my html tag of
overflow-y: scroll;
Which places the scrollbar on the page always so that longer content doesn't make the browser behave inconsistently.
Not sure if this will help you in this case, but worth a try.
[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);
}