Here is my site: http://www.requitedesigns.com/seele/
To see the problem, you'd have to load up the site in Chrome or FF responsive mode, say the iPhone responsive mode. Scroll to the bottom. You should see the bottom of the page where the copyright is, is not quite there. It's as if it hangs up somewhere around Featured Author or Featured Video.
The reason seems to be the coloumn image, in the middle of the page, the one next to "Ultimate Shortcodes". If I hide that image by removing it's height (set by the matchHeight JS library), I can then see the content at the bottom of that page. But, restore that image height, and the content gets pushed down off screen? I must be missing something. I can't figure out why that happens. I tried disabling all the overflow CSS, to no avail. Is there a CSS guru out there who can point me in the correct direction?
Thanks!
I added a min-height css, seemed to fix it. Not sure why. Oh well. Sorry I could not duplicate an ENTIRE SITE for most of you chaps.
Related
I'm trying to fix a blank space at bottom of footer (I'm seeing in iPhone 7 Plus mobile). I honestly need help with this.
I've tried various methods (ie: overflow, margin, padding) and none had worked. I also tried to view mobile version on page testing sites but they don't show any blank space.
Odd or is it just my phone?
Looking through your code - this img element seems to be creating the issue:
<img src="https://tags.rd.linksynergy.com/cs?ns=ssc&uid3=5d062c714cedfd0012d95054">
Oddly enough, the img element is only there when I first visit the page. If I refresh the page, the element is gone. This leads me to believe that there is some JavaScript dynamically adding it to the HTML. The image itself seems to broken and never loads either. See screenshot below.
You might want to remove this <img> added the end of the file
Upon loading our website I am having some issues fixing the lower content snapping into place. Easier to see on a slower connection but it appears the content is not loading in the place its suppose to be. but loading lower than its suppose to be and then quickly moves into place.
Heres a link to a recording of what I am seeing via google chrome - cable speeds.
https://youtu.be/RgR0IyxiEvg
Thanks!
There is a class ctaWrapper on top. Upon scrolling you are adding a class fixed to it. That is causing the problem.
When the object is fixed, it goes out of the normal flow and gets the ability to stay on top of other objects.
In your case, the object on the top goes out of the flow and all the elements jump up a bit. Just add the class fixed to it. Because, I don't see the need to add fixed on scroll as the wrapper stays fixed all the time
You are using a plug-in called "Simple Custom CSS and JS" which places your custom css and javascript inside your page's body tag, right after most of your content.
Which causes those css rules and javascript codes to be applied with a delay. Moving those from your page's body to head will solve the problem.
Edit:
Now I have checked the video you provided. It looks like the problem is about your image gallery. Before your gallery is loaded, your image(with "FRYD") has full(or auto?) width and height. When your image slider starts loading, it scales the image down to match the container's width(or height). You should consider doing this scaling with css in your page's head. most probably something like max-width:100%;height:auto; would be sufficient.
After days of trying to figure out what was wrong it was a simple render blocking issue. The height attribute for the banner was loading after the rest of the content. So i had the elements above load in their css before the elements below. Which solved the problem.
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
Morning All,
I'm having a very annoying issue with a sticky footer using Ryan Fait's - however the main problem is the footer overlaps my "main" div with the content when the browser window size is reduced. when you make the browser window small enough, it eventually disappears. I just want to stop it from overlapping the content, so as I make the window smaller, the footer sticks to the bottom of the page until it gets near the "main" div, then it should go out of view (creating a scroll bar for the page).
I've searched for and tried more than a dozen fixes via google to no avail (I have a feeling it's probably a piece of bad code on my behalf causing an issue) - I'm recently getting back into the swing of things with web design.
Enough of my talking anyway, see for yourself here: http://www.steviespittle.com/recruitment/design3/index.php
P.s. it's not optimized for I.E 7/8 at all - another issue I'm struggling with as I'm not familiar with cross-browser compatibility.
Any help would be appreciated.
Thanks,
Stevie
I have an issue which I assume is CSS, but I cannot seem to find the fix for it. I am using a WordPress theme (the site can be viewed here: http://sencb.com). Everything functions as intended, unless the screen size is somewhere sub 1050px wide. I know most modern monitors are much wider than that, but this is still a fix I'd like to find. The problem, when the screen/browser window is smaller in width, usually somewhere around 1050px, the whole scrolling content side (the right side) shifts left over the fixed area and navigation menu. I've tried just about everything I can think of, so I am in hopes someone here can find the fix. Thanks in advance!
The problem is the sidebar is using position fixed. Whatever the browser's width/height and scroll coordinates, the sidebar will always be in the same place in the window. The content area, on the other hand, moves naturally and is able to appear anywhere on the browser window space. Sometimes it just happens to overlap the sidebar.
Try adding z-index: 300 to #main-leftarea and see if that works for you.