Highlighted

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

New Here ,
Aug 18, 2020

Copy link to clipboard

Copied

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

 

Views

69

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Aug 18, 2020

Copy link to clipboard

Copied

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

 

Views

70

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 18, 2020 0
Adobe Community Professional ,
Aug 18, 2020

Copy link to clipboard

Copied

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 O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 18, 2020 0
Adobe Community Professional ,
Aug 18, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 18, 2020 1
New Here ,
Aug 26, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 26, 2020 0
Adobe Community Professional ,
Aug 26, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 26, 2020 0
New Here ,
Aug 27, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 27, 2020 0
Adobe Community Professional ,
Aug 27, 2020

Copy link to clipboard

Copied

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.

 

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!

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 27, 2020 0
New Here ,
Aug 27, 2020

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 27, 2020 0