I have been searching about this problem from last week...all I could found is this " overflow-x :hidden "
Here is my site : seriesratings.com
when I open it in my iphone, it shows me horizontal scrollbar.
I tried this already:
html,body{overflow-x:hidden;overflow-y:scroll}
someone has told me this "You have inline styles all over your html that will not be properly fixed by using css"
I can not change style now because site is fully developed.
does someone has any other way, like hide horizontal scrollbar with jquery or JS or any other code.
At the sg-site-header-1 I found a H1 with an A tag in it, this thing causes the horizontal scroll-bar, why should you make a color #blank? This is not working, then make is display: invisible or something like that. Hopefully this will work for you!
#dutchsociety Thanks A Lot, you saved me, If you have time can you tell me how did you find out the solution to the problem, so I can do it by myself..
I opened my element inspector in Google Chrome and deleting sections of the website. So on that moment I deleted the header and saw that there was the long sized H1.
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 am creating a website at the moment where scrolling will be disabled on the entire website (it's made out of sections, all are as tall as screen height except for 1 section, because that one is too large..).
I've been looking around to see if any plug-ins exist for this yet, but haven't had any luck, yet.
Would anyone know a plug-in or how to do this?
It would help me a great deal.
if all of your site has the style overflow:hidden then you can target the one section by id or class and make it overflow-y:scroll
ps the link you posted is a 404 error
You can use css to disable or enable scroll for a containing element by setting the overflow property to none.
However, in your case, I guess there is no reason for a script, you can simply set the overflow property in the style of the offending element.
Here's the code:
http://jsfiddle.net/tqkr9vyz/2/
function setScroll(elementName, s) {
document.getElementsByName(elementName).style.overflow = s;
}
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.
Check it out here: http://bit.ly/16DJQjN
When I resize the window down to a lower resolution, everything is fine, the navigation menu turns into mobile version. But just try to get the page narrower and refresh the page, you'll see the items drop down one after another in an irregular way, just resize it once more, it's perfect again. That way, it doesn't seem alright on lower resolution devices when first opened.
To give you an idea of what it looks like, that's how it looks when the page is opened in this resolution.
But when I just resize it in any way, it looks perfect, see:
I checked the JS and CSS, obviously it's not done with media-queries thing, I believe it's pure jS. How do I fix it? Can you help me?
Add this css to your style sheet this will hide menu until javascript load.
.responsive_nav ul{
display:none;
}
I have way too much padding at the bottom of my page and I have no idea why it is there. I have looked at Firebug in Firefox, but can't seem to find out which element is causing the extra padding. I know it will be really stupid, but I can't for the life of me figure it out. Thanks for helping out!
The site can be found by clicking here.
EDIT:
I just realized that this is an issue specific to Firefox. It looks like I would expect when I load the page in Safari. Any idea why Firefox would render the page with an extra 200 or so pixels at the bottom of the page (which causes the browser to have scroll bars when the page doesn't require them).
Thanks for the suggestions already given!
Check line 1197 of your stylesheet (styles.css).
The height of div.bottomLineContainer is being set to 200px. Try changing the value to 100px instead.
I just looked at the site. Remove
.cf:before, .cf:after {
content: "";
display: table;
}
It's on line 1361. If you turn off either property the extra space goes away. To find it I just methodically deleted each piece of html in firebug until the culprit was found, then started turning off properties one by one.
Nice site.
I would check the extra DIV statement you have listed below the contact us banner. Try removing them and see what happens. I will check on my end in the meantime.
It's your shadowbox which is causing the extra space, i tried loading the page without it and there was no extra padding on the bottom. Check documentation for the shadowbox.