CSS of page(height,width) appears smaller than what it actually must be

StackOverflow https://stackoverflow.com/questions/22111296

Question

I am using a reveal.js code.

The code works perfectly fine in my local pc as well as jsfiddle

But the moment i put the code in my website.the width and height of the content changes from 1000px to 200px.

If I use inspect element...it says the width of the container is about 600-1000px...but if we see it visually it appears only 200px.If I change the number to some larger number,say 4000px,it changes to only max 300px.

Somehow whatever content I put it appears minified.

Here is my website and working jsfiddle

I am stuck on the this thing since past 2 days,inspect element is not helping

The basic code for CSS is

html, body {
    width:100%;
    height:100%;
    overflow:hidden
}
.reveal .slides {
    position:absolute;
    width:100%;
    height:100%;
    left:50%;
    top:50%;
    overflow:visible;

Edit:After much research,I found out,that apart from the height,width issue,various transitions are not working...there is something disturbing the js code

Was it helpful?

Solution 2

Removed 

<!DOCTYPE html>

and it worked.Don't know logic,but i am glad its working now.

OTHER TIPS

just add this line to your .reveal .slides css class

zoom: 1 !important;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top