Strange css overflow like effect taking place - html

I've been using a twitter bootstrap based template.
For the images at the bottom of the landing page, for some reason there is an extra scrollbar that appears which then causes the images in the portfolio at the bottom to appear cropped, or partially loaded.
Not sure which bit of html or css is causing this, as the problem doesnt seem to occur in the original template. I've checked and compared my code to the original but cant figure out what's causing it.
I have removed alot of the code from the original as i dont need much of it. I just wanted a simple homepage, but cant figure what's causing the additional scrollbar or overflow effect.
Here is the page link if anyone has any ideas: http://krmmalik.com/photography/

The reference to the Ascensor.js is what's breaking the site and adding all that ugly inline CSS to the body. I have no idea what it's supposed to be doing honestly but it's breaking things at the moment. I disabled js on your site and reloaded it and everything works fine.
That layout isn't responsive as much as it is just a fluid layout. It doesn't resize well honestly. I hope it wasn't terribly expensive. Either that or something you changed broke how it is supposed to resize.
I'd try and find out what that script is supposed to be doing, but in the meantime just remove the reference and your site seems to load correctly.

I'm seeing this in Chrome dev tools:
<div class="house" id="house0" style="height: 268px; width: 1726px; overflow-y: scroll; overflow-x: hidden; margin-top: 0px; margin-left: 0px; position: absolute; ">
which sets a fix height, and then causes the second scroll bar when items drop below that height with the overflow-y:scroll; property.
However, this isn't in the View Source of your document! Getting rid of that is the key to fixing the problem, if you happen to know where it's coming from.
If you have control over it, maybe try changing it to:
<div class="house" id="house0" style="min-height: 268px; width: 1726px; overflow-x: hidden; margin-top: 0px; margin-left: 0px; position: absolute; ">
What this (should) do is make it never be shorter than 268px while allowing it expand to a new height, if it needs to. I say should because I didn't test it!

here is you made silly mistake. just remove overflow-x: hidden;
and overflow-y: scroll; and your code something like this.
<div id="house0" class="house" style="width: 1263px; margin-top: 0px;
margin-left: 0px; position: absolute;">
Hope it will helps you, Cheers. !!
Mark it as answer if it will helps so that other can fix their same problems. Thanks.

Related

I have 2 scrolls bar on my page , can't figure out why

I'm creating a website at the moment for quite a long time now. The last thing I did with it was to make it responsive on my second smaller laptop with media queries. However, I'm noting that another scrollbar appeared when I opened the site on my main computer. The 2 right side scrollbars aren't dependent.
The whole website is in a folder, so I can't really share HTML/CSS codes. Firstly I wanted to know if someone already faced this kind of problem and could advise me from where to start to solve it. I guess it's in the CSS where I possibly created many body/html rules ?
Thank you !
So basically you were having overflow enabled on your div and the default is of body.
therefore you saw 2 scrollbars. One of div and one of body.
That's great if you've solved it by disabling the default body scrollbar and keeping the div overflowable in the y-axis.
I have faced a similar problem a while ago.
For a better answer i should read the code but i can tell you where you should start to look for the problem.
This is probably happening because of a div in your page that has a rule such as "overflow-y: auto" and it's parent is itself bigger than the current page heigth.
.container1 {
background-color: red;
height: 10000px;
width: 100%;
}
.container2 {
background-color: blue;
height: 100vh;
width: 100%;
overflow-y: auto;
}
.container3 {
background-color: green;
height: 10000px;
width: 50px;
}
<div class="container1">
<div class="container2">
<div class="container3">
</div>
</div>
</div>
I made a quick snippet you can execute to see better what is happening.
I hope this helps you to find the problem.
Finally solved it. I had to put manually a <style : "overflow-y:hidden;"> to my body on my html page, even if I tried to solve it with CSS. Now everything's working well !

How to hide padding devoted to scrollbars that don't appear?

I've got a frustrating issue here involving a nav element that always displays an area to contain a scrollbar, even when the scrollbar is not needed. Here's what it looks like when all the content is displaying:
Here's what it looks like when you reduce the height of the window so scrolling is necessary to see all the content:
And here's what it SHOULD look like:
Here's the CSS for this element (as written in React and including some variables I'm leaving in -- I'm assuming those shouldn't matter):
box-sizing: border-box;
background-color: ${Color.White};
border-radius: 8px;
height: calc(100vh - ${heightCorrection});
padding: 0 16px;
text-align: left;
overflow: scroll;
width: ${width};
display: flex;
flex-flow: column nowrap;
> header,
footer {
padding-left: 16px;
}
I created that third screenshot by changing overflow: scroll to overflow: hidden, but that prevents me from being able to scroll when I need to, and I still need that to happen.
I should mention that a frustrating thing about this issue is that most users haven't been able to replicate it. I don't have any particularly unusual setup; I'm running the latest version of Chrome on MacOS. But others with very similar configurations aren't seeing that empty scrollbar area. This issue stumped one of the best front-end developers I know (who can't replicate it), so I thought I'd try here and see if anyone has any ideas.
Well, I didn't get any traction on this, but in case anyone lands on it, the answer is simply to change overflow: scroll to overflow: auto.

Divs are crashing on different screens

When I coded my website on my 18 inch screen, everything looks perfect! But, once I got over to my Mac (13 inch) everything just went big and the divs were crashing and everything looks extremly zoomed. I know this have something to do with sizing and the position, but I need further help.
One of the CSS it happens to are this code, is something wrong?
#client_play {
position: relative;
padding-top: 125px;
padding-left: 560px;
padding-bottom: 200px;
}
Link to page: like4fame.com/rsps/index.html
Link to my css: http://like4fame.com/rsps/css/css.css
A good starting point to resolving this issue is to remove the position: absolute, position: relative, and position: fixed styles in your code.
You also want to avoid using <center> and go with text-align: center or margin: 0 auto to center your text or div.
Removing all those styles from your code should help you achieve a better overall website fit for several screen sizes.
I also agree with jfriend00 above about reading about responsive web design.

Issues with pointer-events and z-index

I've been tearing my hair out for a while now trying to figure out why I can't click the links in my footer. I know my css is a bit sloppy, but it gets the job done. There's probably a lot more efficient way to get the effect of a footer that sticks to the bottom of the page that appears behind all the rest of my content, but this is what I have so far:
here's my jsfiddle of my issue
it looks a bit messed up in the jsfiddle, but the idea is thereI have a pointer-event:none here:
.bottomdivtransparent {
pointer-events: none;
width: 100%;
top: 0px;
height: 300px;
left: 0;
overflow: hidden;
opacity: 0;
}
Which should make it so I can click the links, but they remain unclickable! I'm sure the error is something really simple and staring me right in the face..
Any suggestions? Or any easier way to get the footer to appear behind all of my content but still extend about ~300px below everything?
Thank you!
edit: Thanks to Kasyx and Andrea Ligios for the help -- they have determined that it works fine in Firefox but not in Google Chrome for some reason. The margin-bottom property is messing up on .bottomdiv..
As i noticed in comment pointer-events will not work in this case. But instead of it ill suggesting you to add margin-bottom to your div like in fiddle: http://jsfiddle.net/auFeV/6/
.bottomdiv {
//(...)
margin-bottom: 310px;
//(...)
}
(Thank you #Andrea Ligios for improving this answer)

Webpage has a large right-margin in iOS

I have checked everything on my page and cannot figure out what is giving my website a large right-margin in iOS. It's driving me crazy. I've tried setting overflow: hidden; on the body to no avail. There is nothing that is wider than 960px. This is a very responsive design and all is working well except this one infuriating thing. Here is the URL to the dev site: http://ourcityourstory.com/dev/
Please see attached screenshot:
Any help would be appreciated.
Update: I've tried fooling with the viewport. See this Stackoverflow post. But to no avail. I built the entire site off of the HTML 5 Boilerplate
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
Add this to your CSS. then it should be working fine
The culprit was the Facebook share button. Instead of behaving like Twitter or Pinterest it iframes in and sets a width on the body of 500px!
A simple overflow: hidden; on my .social class fixed this.