Tablet does not show 100% of height compared to desktop view

[Thierry5E43]

Hi,

I created a website that looks perfect on any computer, but as soon as I view it on a tablet, I lose the bottom view.

Here is the link : test.lacbr.tv

I tried many things on the net to fix it, without success.  I figure there must be a trick in DW that can fix this?  I lose 5 to 10% of the bottom scree

Thanks

[Nancy OShea]

This isn't a DW question so much as a coding question.  When I disable all CSS in my browser, the problem goes away. 

Fix your markup errors first.

https://validator.w3.org/nu/?doc=http%3A%2F%2Ftest.lacbr.tv%2F

CSS Warnings and Errors such as these are often triggered by non-standard code & vendor prefixes the majority of which you can ignore.

https://jigsaw.w3.org/css-validator/validator?profile=css3&warning=0&uri=http%3A%2F%2Ftest.lacbr.tv%...

I think that 18 stylesheets is a bit ridiculous to work with.  Too much code to wade through and I don't have the time or incentive to go through them all.  I'll let you figure it out.  Simply comment out all stylesheets except Bootstrap.  Then add one at a time until you start to see problems.   Instinct tells me the custom scrollbar may be a culprit.

[Nancy OShea]

One more thing about script order.  With Bootstrap, the load order matters greatly. 

<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...-->


<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

[Thierry5E43]

Thank you Nancy.  

Still didn't figure it out, I've been reading a lot of things on the web, I'm using 100% height instead of 100vh,  I also tried to correct as many mistakes I could from your links but I'm not advanced enough to understant everything.

I'll keep digging

Thanks

[Nancy OShea]

Page height is determined by content, not explicit height values.  By default, all pages are 100% of content.  Less content = short pages.  More content = longer pages.  Scrollbars are essential for usability. 

To succeed in web design, you must be able to fix your code errors. 

On line 508 you have a closing </p> tag without a corresponding opening <p> tag.

[Thierry5E43]

Got the correction,thanks

Even thoug I have 18 stylesheets, what does it have to do with screen size?

The problem I have is in the initial conecption of the website.  I have a fixed size website.

This means that it needs to adapt to any browser, height and width.  Now the problem I encounter is if I'm using Android or iPhone, I get a different screen shot.  iPhone 11 truncates the top and bottom of the site, and Android only the bottom

I have a hard time finding documentation on the web because most websites use scroll.

On my website, information is hidden behind the address bar on top and the navigation bar at the bottom (iphone)

why doesn't the screen size adapt itself instead of being hidden?

[Nancy OShea]

No offense but what you don't know about web design and usability would fill volumes.  This is a product user forum, not an advanced course in web design.  I suggest you take some structured learning courses online from LinkedIn Learning (formerly Lynda.com) or Udemy.  Free trials available. In addition, you can learn basic coding skills for free on W3 Schools.

• https://www.linkedin.com/learning/topics/responsive-web-design
• https://www.udemy.com/courses/search/?q=responsive%20web%20design&src=sac&kw=web%20design
• https://www.w3schools.com/

Meanwhile,  I'll leave you with 2 small thoughts.

1. Fixed-width pages don't fit all devices.  That's why we don't build sites that way. Responsive or % based layouts are more efficient and work better across all devices.
2. Removing scrollbars for aesthetic reasons is like shooting yourself in the foot and wondering why your foot hurts.  Bad practice, not recommended. 

Good luck!

[Thierry5E43]

Thanks, and yes, I already completed 2 dreamweaver courses on udemy in the last month, and doing more!

I know I have a lot to learn. thanks for the tips