I have created a home page when I try to open it in mobile view the content is overflowing what might be the reason
I think I have done mistake in padding. Can anyone tell me how to solve this problem.
Related
When using Codepen on a mobile device (with the pen in fullscreen mode), the menu stays fixed at the top of the page while the rest of the content scrolls behind it. On inspecting the element, there does not seem to be any position:fixed or position:absolute being set nor any inline styles being written by Javascript. I can't see any properties which would seem to be defining this behaviour.
So how have they made the menu sticky like this? And if you were able to find out: how did you find out? As a junior dev it's just as helpful to know the way a solution was found as it is to know the solution :)
Could you show us at least a screenshot of what you are trying to reproduce and a sample of what you have tried so far ?
If you looked a little more in detail, you'd see that the view is inside an iframe, so the scrolling actually occurs inside the iframe, that's why the menu holds still on top. You could have noticed that the scrollbar is actually inside the iframe too.
See the image below:
I'm currently trying to implement a feed of posts, where clicking on a post would open a modal. I'm using angular as a frontend framework and decided to use the bootstrap modal, since it works well with angular. Problem is, that the modal forces the body to scroll to top when showing. This is ofcourse not ideal when scrolling through a feed.
The css line below is the culprit. Why this causes the problem to occur, i do not know, but i kind of need the scrollbar to be always showing. Loaading of dynamic content would otherwise make my layout jump around.
html {
overflow-y: scroll;
}
Removing this line is fine right now, but i need to find a fix soon, as the layout would jump horizontally when loading new content, if the scrollbar is not always visible and then suddenly appearing. Does anyone have any clue as to why this causes the problem, and how i can possibly fix it?
Sounds like the modal is the problem. Make sure your modal or its outer-most container has position: fixed, as it sounds like it is disrupting the flow of the <body> element.
Please take a look at this site: removed per request
When you click Learn More, the Fancybox lightbox window pops up and looks fine, but when you click the right arrow on the lightbox, a scrollbar shows up for just an instant (it reaches all the way to the top of the doctor's picture). This is happening on Chrome and Safari.
I can't figure out what code to write to not show that scrollbar. The content will never be long enough to need a scrollbar (except on mobile, etc). Another option would be to just have the scrollbar stop at the top of the content container (not go all the way up to the top of the dr's picture). Please help if you can; it would be much appreciated!! I'm a newb to jQuery/Javascript. Thank you!!
You can try to solve this with CSS. Set overflow: hidden on the container div. This will hide any content that overflows the container, so use with care.
So I found a problem with my website so have added in
“-webkit-overflow-scrolling: touch”
So that the scrolling left-right now works when content overflows (all the content is within an iframe). However I've noticed that when you scroll either vertically or horizontally within this iframe any content that wasn't initially draw on the page is not shown, it's just white.
Is there something I'm missing?
http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/
This pretty much sums it up, and provides one pretty poor but usable implementation. The fault lies with Apple and this will be a temporary workaround.
I have a short question for you. Could anybody help me figure out why after an Ajax request, the page scroll is changing back to the top? I think it's about JQuery. I can't find too much info on the web, so I ask for your help. This is the test page where I'm doing that. Try changing and see what is happening. Thank you so much!
www.*.ca/test/script.php
Got the answear. Thank's
I just ran into this situation with some embedded pagination and I came up with a trick for dealing with it. On page load I grab the calculated pixel height of the content div and then set that fixed height back onto itself. This keeps the div at a fixed size while the page contents are destroyed and replaced.
var height=$('#content').height();
$('#content').height(height);
Or more briefly:
$('#content').height($('#content').height());
Because the page momentarily becomes shorter, so the scrolling position cannot remain where it was or else the page would be scrolled past its contents.