Building a new website using Wordpress 4.2.3 with Tesseract 1.0 theme, ran into a problem that only 1/3 of the Footer is visible immediately, seeing the rest requires scrolling down.
This happens even on a page that is almost empty and the browser window maximised, screen resolution 1920x1080.
Same problem with Firefox and Chrome. I would expect to see the whole footer without any scrolling.
Any hints appreciated!
One of two routes I would go:
1) Check the jQuery script running on page load may be finding .height() of your footer instead of .outerHeight()?; the later would calculate height including padding and margin. The former would not.
2) Without tinkering with the script, take off the 40px top/bottom padding on your footer and instead use a wrapper element inside your footer for placing the content. Give the padding to that wrapper instead. This should alleviate any issues with calculating sizes of elements in your script.
Related
I am looking for a CSS solution to implement the exact behavior of "overscroll-behavior: contain" but for when the target element has no overflow.
I have a page with a pop-in sidebar/menu that, on mobile, takes up 100vw and 100vh (minus bottom navigation bar) and does not overflow (there is not enough content to need scrollbars). Currently when this sidebar is open on mobile, if the user tries to scroll it, the main page in the background scrolls, which in this app can result in unwanted database calls due to lazy loading/infinite scroll.
Here is a minimal codesandbox demo:
On line 55 of demo.js I have added the overscrollBehavior: "contain" property to the JSS, but as you can see, it does not contain the scroll chain, unless you shrink the vertical height of the browser to force the content of the sidebar to overflow first. (On Chrome the overscrollBehavior seemed to have the expected behavior in the codesandbox editor, but not when popped out in its own window.)
Surely there is a CSS solution to get this behaviour without the element having to be scrollbable first?
Interestingly, on Firefox at least, if you shrink the vertical height to force scroll on the side bar, once you resize the browser back to normal, the overscroll-behavior property continues containing the scroll chain until you refresh the page, which is the behaviour I'm looking for, though obviously on initial page load.
Here is a simple codepen showing the difference in overscroll-behavior for elements which do and do not overflow, if it's not already clear. I also found another post on the CSS Tricks forum from 2018 of someone asking about this behaviour, but with no solution.
I am trying to fix this top heading while keeping the scrollspy working but to fix it either I have to use position fixed and then it takes the width of the whole page or I tried using position sticky with top 0 but it doesn't work and as soon as I wrap it in 100vh it starts working but scrollspy stops working. any idea how to solve this issue? it's really important to make it responsive so cannot use any px value for width as well.
update - I have tried my best to replicate the problem in the sandbox link here. you can see the issue in different resolutions through inspect.
I have created a layout using DIVs/CSS. I have attached an example image and links below which shows how I would like things to be organized. Within the header, there is a logo and a menu which are cumulatively 1000px in width. The feature, content, and footer sections are also to be 1000px in width. However, the actual background images for ALL sections are 100% in width and are repeated horizontally.
Below is an example of what I want to do:
What I have actually put together so far (in terms of the design) can be viewed here: http://ohachem.com/2/. This is what I would like to follow. The CSS can be viewed here: http://ohachem.com/2/style.css
What is the best way to accomplish this? As you can see, the text in the "feature" section does not align completely in the centre. I've tried using clear:both, overflow:hidden, and several other methods, with no luck.
The "misalignment" of the "featured" text is caused by the floating logo. Because the float hasn't been cleared and extends outside of your header, it is causing that text to flow around it. Adding overflow: hidden to your #header element will correct it, but there's other ways to clear floats without adding extra markup.
Alternately, you could just make your logo the same height as the header. Right now the height property is set to the same value, but the logo has some extra padding, which is causing the overflow.
The website you're pointing to uses a liquid layout, here's a bunch of examples: http://www.dynamicdrive.com/style/layouts/category/C13/ .
One note, on your example, there's no positioning attributes that I can discern, a large part of making a layout responsive is ensuring it looks consistent across all browsers & screens.
I would Suggest you to use CSS3 Media Queries rather than Script for the Responsive/ Adaptive Web page design.
Please have a look at this
These do not process a lot, hence Light weight and most modern browsers and Devices support CSS3 hence a convenient and reliable Option.
So, for a website I've been trying to get a specific layout to work across the IE browsers (FF + Chrome are a plus if they work, but usually they do).
Below you can see the layout I'm trying to achieve;
alt text http://dl.dropbox.com/u/2199846/layout.png
As you can see, this is just a slight variation of a multi-column layout that you can see around the internet. Just with some added extra's.
- no div should ever exceed the page height, if they do, they should just overflow (but normally that will only happen for the middle part)
- the "toggle" link should toggle the div below visible/invisible (got the jquery code and all, no issues there), but that toggle should offcourse expand/decrease the width of the middle div.
I'm at the end of my possibility's here, and tried changing to a full table layout, but that had the problem of always expanding when content got too much...
If any of you CSS heroes out there know how to make this layout, I'll be very grateful!!
EDIT:
What I forgot to add is that certain parts of this design should be fixed width/height. The top part should be 60px height, right and left side should be 200px width. And the small bar (+ toggle bar) should be 30px high.
Of course I'll try to work from the example posted below, but I thought I'd add this edit just in case someone finds it challenging to make (I know I find it challenging, yet I'm not so good yet in CSS for now)
http://jsfiddle.net/YGgTx/1/
this is a mock up of what you are trying to do I believe. As it indicated by the other posters you may want to use hide() to handle the menu effect. If there is anything wrong with this mockup let me know, I do not have IE6 installed but it works on 8.
I have a site with a fixed footer at the bottom of every page. The content area above the footer has a appropriate margin to ensure that content does not hide behind the footer when scrolling down.
However, when a simple text search if performed in the browser (firefox) the search term is usually hidden behind the footer as the page normally (without the footer that is) scrolls to just bring the search term into view.
How can I work around this issue?
I have one idea in mind: Make the content area of a fixed height (browser viewport height - footer height) and give it a scroll instead of the browser. Not the best solution but that is an option. What would be the drawbacks to this option?
I've noticed this before with one of my own projects but, is this minor inconvenience really important enough for you to alter the layout of your page? I would not suggest the fix you are considering simply because it is unnecessarily adding complexity to your code and the user experience will likely suffer (much more so than the problem you're describing).
I would just let it be.