search

marcolago / flowtime.js

Flowtime.js HTML5/CSS3/JS Websites and Presentation Framework
https://marcolago.github.io/flowtime.js/
MIT License
1.34k stars 237 forks source link

fullscreen for web browsers affects view #55

Closed armaandhir closed 8 years ago

armaandhir commented 8 years ago

In browser full screen view, the sizes of elements move out of view port. photo 1 error

marcolago commented 8 years ago

It look just like the Font size is too big because the media queries and the responsive logic. It should be enough to tweak the CSS to fit everything in the screen.

If you could send me your main HTML file I will do the tweaks for you.

Let me know. marcolago

armaandhir commented 8 years ago

@marcolago Thanks for your reply! I just noticed that the issue is only with Chrome browser. So yes, It might be resolved using media queries. For time being I am completing my presentation. Once done, I will let you know if I am not able to solve it!

marcolago commented 8 years ago

Ok, let me know if you need further support. I’ll do my best to help.

armaandhir commented 8 years ago

@marcolago The issue still exists buddy. I dont know why the elements dont fit in the full screen mode of the browsers!

marcolago commented 8 years ago

Ok, I'll check it out. Could you send me the markup (at least of the failing page in your screenshot) and the Chrome version?

Tomorrow I'll be in office with a Windows 10 machine. I still have Win 7 in my Bootcamp partition.

I'll let you know soon.

marcolago commented 8 years ago

Hi. I’ve checked out and the problem is a combination of your screen size and this media query:

@media screen and (min-height: 41em) and (min-width: 80em)
{
    html {
        font-size: 120%;
    }

When you look at the presentation with the browser’s chrome on you have a viewport height less than 41 em (41*16 = 656px) but if you look the same presentation in full screen the height is 768 px so the font-size change at 120%.

If you get rid of the media query you should get rid of the problem also. You can delete the media query rule just to test or change it like this:

@media screen and (min-height: 48.5em) and (min-width: 80em)

to be sure that with you screen everything is ok. Mind that if you present on a different resolution screen (maybe a 1920x1080 full HD screen) you may edit other media queries also, so check you presentation on the required output resolution.

Let me know if you still have the problem even after deleting or editing the media queries. Thanks for the patience.

marcolago

armaandhir commented 8 years ago

Hi, Thanks for the reply. Ill test this one and let you know. If it still exists, I will send you my ppt so that you can have a better view of whats happening. I am a software developer too but bad when it comes to web design and front-end development. The only reason I like flowtime is because it is easy to implement and many things were already aligned in the default theme.

marcolago commented 8 years ago

Ok. I’ll wait news from you. Consider that, just like PowerPoint, some contents may exceed the page if too long but you can resize the text on a single page to better fit the content with a little of CSS (I will help you if you need).

Let me know if you need further support, and thanks for your appreciation.

P.S.: Yes, working with CSS can be a pain, I know it very well ;)

armaandhir commented 8 years ago

Actually I got it fixed using the media query. However I think you should work on media queries a little bit more to support more screens. Reaveal.js handles this perfectly. flowtime's spacing and font is not appropriate if you move to different screens.

I am worried how my ppt will look during presentation lol.

Also can you tell me how to handle image sizes in different screens ? is it important to use png or jpg are fine?

look at this: http://armaandhir.com/ppt/#/section-4/page-2

marcolago commented 8 years ago

Yes, sure!

Il lunedì 4 aprile 2016, Armaan Dhir notifications@github.com ha scritto:

should I email you my code so that u can fix that fullscreen thing ?

— You are receiving this because you modified the open/close state. Reply to this email directly or view it on GitHub https://github.com/marcolago/flowtime.js/issues/55#issuecomment-205182625

marcolago

Interactive Stuff Designer, Observer, User

Twitter: @marcolago http://maledettaconsole.tumblr.com/Open Source Projects: http://github.com/marcolago/ On Frontend Development: http://absolide.tumblr.com

On Video Games: http://maledettaconsole.tumblr.com

marcolago commented 8 years ago

@armaandhir Have you already sent me your markup? You could send the source at: marcolago at gmail dot com.

I have some email issue these days so I want to be sure of not missing something.