Page jumps on scroll to sticky footer on mobile only - css

for some reason my website continues to jump at the end of the page and the footer is not visible - however only on mobile. I have no clue what I could do differently. Maybe someone has an advice for me? I build my app using React. I already added extra margins to the bottoms of the body, the root, the div before to test it but nothing works!
Thanks a lot in advance!
code on github: https://github.com/seabysalt/myWebsite
website: www.sarah-alt.com

Related

Centering mobile UI

I'm fairly new to the web developing/ coding area and looking to develop a website I've built. I'm encountering a few problems with my site, but the main issue I'd like to resolve in this thread is the centering of the content on mobile devices. The content looks fine on desktop but seems to shift to the left and not fill the page on mobile.
See link here: https://loudburr.github.io/louisburr/
Any help would be greatly appreciated!
Many thanks!
If you change your banner text CSS to instead of width to max-width that should work
.banner-text {max-width: 600px;}
I think your "html" code (that I saw in view source page of your site) has some fundamental errors. for example you use a "div" tag in the "head" section of your code. and in line about "50" you have some closed tag that I did not understand that where they started. I suggest that you check your codes in this website: https://validator.w3.org

responsive not full width when loading single page

I am trying to make a responsive website, but I am stumbling upon a weird problem. When I am looking on the desktop page, everything is in the right position. There are no pixels left.
However, when I am loading the responsive version on my mobile, I see some pixels left (just scroll to the left or the right and you will see what I mean). The problem gets bigger when there is content like a single post or page.
The website is here: http://FavoriteFM.com.
I can provider the CSS code, but it will be a lot of lines. I am suspecting something in the content is 'sticking out'. But I am not sure of a tool that can see such problems.
Thanks,
Dennis
Today I have disabled every div by div. I figured out the problem is with the sidebar. I still had: 'left: 8px;' on. Removing it did the trick for me. So if you have this problem, check if something of your content is 'sticking' outside your wrapper. Even if you can't see it, it still can be there.

mobile navigation doesn't fix on scrolling

I'm working for a responsive website on a slider like FB App. It works fine, but if the user scrolls, the open navigation moves with the content. I'm trying to put position: fixed to the element. This works,but if the navigation element is larger than the screen the rest of the content cannot reached. Example: http://lucie-hauri.com.beethoven.ch-meta.net/ (just put the screen to a width of about 300px an the mobile Icon appears, click on it for example).
Has anyone an idea how to fix this?
Thanks for help, regards
Thomas
I don't know if this is the cause, but you have a javascript error (check the console), which may break things up.

Issue with Div inside a div and page going to bottom

I have gone thru the site and searched for the last two hours and am trying to get a wordpress site to work correctly. Everything is working except the white box that holds the content will not go to the bottom no matter what I try. I have tried all the options here but I think it may be that I do not understand enough about css or the divs are all messed up from the template. Can someone please help out with what I have crossed. My page is located at http://craftedimages.com/AA/aae-events/ and you will see the white box on the right that does not extend down. I got this template and have been modifying it of which there were already lots of problems. Thanks for your time ahead of time.
Try adding
#page{
height:1035px;
}
..to the css - the sidebar is this height and although it is auto that is the given height
Hope this helps
Using chrome inspect element. I can see that your <div id="wrapper"></div> has the style
height:auto;
set it to
height:100%;
That should fix it. Only do that for this page. The other pages are set to auto because it forms to their content. This page doesn't have enough content to reach the bottom like the rest of the pages.

Why does one column seem to load first in Wordpress?

I have a Wordpress site that is doing something very bizarre. If you go to:
http://digitaldemo.net/joy/krippen-a-b-c/
When it loads, the main content div loads on the right hand side of the page
and then once the sidebar loads, THEN it gets pushed over to where it ought
to be.
It's only really noticable in Firefox, but I'd like to find out what is causing
it and fix the issue.
Any ideas?
I solved the issue! I added position:relative to the #content div and then added position:absolute and left:30px to the #content-left div. Voila!
Thanks for everyone who tried to help me!

Resources