Skip to main content
Thierry5E43
Known Participant
Aug 18, 2020 8:51 PM UTC
Question

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

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 is closed to new replies. Start a new post to keep the conversation going.

    7 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    Aug 18, 2020 11:44 PM UTC

    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>

     

     

    Translate
    Nancy O'Shea— Product User & Community Expert
      Thierry5E43Author
      Known Participant
      Aug 26, 2020 1:59 PM UTC

      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

      Translate
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      Aug 26, 2020 6:11 PM UTC

      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.

       

      Translate
      Nancy O'Shea— Product User & Community Expert
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      Aug 18, 2020 11:29 PM UTC

      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.

       

      Translate
      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