I have a pretty simple site, which has a footer that is stuck to the bottom of the page and a content area that can scroll if the content is too long, and the end of the content will clear the footer like below. If the content fits in the page then no scrollbar is shown.
However, recently some CSS/php change which i can't for the life of me detect, has meant that the page no has this huge area under the bottom of the main content div which the user can scroll down like so.
Normal page view with everything looking as it should.
Here is the view for every page now, a user can scroll way below the end of the main content div to reveal this massive empty area underneath.
Having had this working nicely a day ago, Im not sure where to look next. I have check all of the css to make sure there are no syntax errors, I have checked all of the wordpress template files to make sure there are no unclosed divs or vice versa.
Does anyone know a starting point to look at to try and fix this? is there a common error for this type of thing? If you need a link to the stylesheet or html just ask (didnt copy as it was too long)
Not sure why you are using fade element. Definitely it's causing the issue.
Add this CSS to fix your scrolling problem by hiding it.
#fade { display: none; }
Related
On my site http://math.byu.edu
I've been trying to make it responsive to screen size but I noticed a problem when I resize the broawser while on the page. If I shrink and enlarge the browser multiple times the min-height is dynamically getting set to a huge number and I end up with a lot of whitespace.
I've searched my php templates and my css and I can't find anythign that owuld be causing this min-height issue. Does anyone have any ideas?
As per the comments, just comment out the line positionFooter() from the $(window).resize() function.
The reason this theme has this script is to make sure the footer doesn't float into the middle of the page assuming the page has zero content. When the page has zero content, there's nothing to push the footer down. So that script is supposed to keep the footer at the bottom of the page, though it does it poorly.
For future reference, if you need a sticky footer (as it's called), I suggest using Ryan Faits Sticky Footer. Just wrap the content in a main wrapper, make sure the footer is a sibling of the main wrapper then use the supplied CSS to make it work.
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
I've already modified the overflow: hidden, to be set to overflow: auto, and this works quite well in the .header-container, although it seems that although this fixes the problem, there is still the issue when this is set that the images (such as the iPad at the top of the page, then overlaps the next section below it).
Thoughts on how to make sure either the image extends the container so it doesn't run into the next one, or how to fix this once and for all?
Just a thought, could this possibly be the Javascript, as I noticed that the menu bar when scrolled down doesn't dissapear until hovering over an active/Javascript link in the nav bar.
Your support is greatly appreciated :)
If you put a console.log in your call:
if ($(window).scrollTop() > 500 && getScreenWidth > 767) console.log("true")
else console.log("false")
Do you see in your console log the value changing when you scroll down at your homepage? And is this the same output as on your bookkeeping-plans page?
and does it also appear if you remove the slideup and slidetoggle functions?
$(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').slideToggle(250);
This is what I can think of that is conflicting your code based on what I see on your website
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
I have been struggling for several hours about this problem, although it seems ridiculous I cant fix it somehow.
So this is the webpage draft, http://www.mysecretathens.gr/Sera/test.html
If you click on the Bio link, you will notice that the topbar menu on the Biography.html is moving slightly to the right.
How can we fix that? Any ideas?
p.s I have noticed that If I have the same picture in biography.html as in test.html there is no problem, the topbar remains in the saim position.
html{
overflow-y: scroll;
}
This forces a scrollbar on the right hand side
That's because your first page has a scroll bar and the bio page doesn't. You can force a scrollbar to always show up which can be annoying but consistent, or use absolute positioning to have the content always appear in a specific location, albeit probably not centered.
The content on the first page is going below your screen, meaning you will have to scroll. This isn't the same for the bio page, hence the inconsistencies, either add more content, set overflow-y to scroll or just ignore it (as users will)