CODEWITHSUNDEEP
htmlcss
Khuram Malik
Khuram Malik

Reputation: 1485

Strange css overflow like effect taking place

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/

Upvotes: 0

Views: 143

Answers (3)

Rick Calder
Rick Calder

Reputation: 18685

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.

Upvotes: 1

immayankmodi
immayankmodi

Reputation: 8580

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.

Upvotes: 0

jamesplease
jamesplease

Reputation: 12869

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!

Upvotes: 1

Related Questions