Skip to main content
T
Thierry5E43
Known Participant
August 18, 2020
Question

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

  • August 18, 2020
  • 2 replies
  • 700 views

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

 

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 18, 2020

    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>

     

     

    Nancy O'Shea— Product User & Community Expert
      T
      Thierry5E43Author
      Known Participant
      August 26, 2020

      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
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      August 26, 2020

      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.

       

      Nancy O'Shea— Product User & Community Expert
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      August 18, 2020

      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%2F

       

      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 O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices