Member Avatar for Jon_7

I'm trying my best to get my page to show on mobile devices correctly, but I've run into a roadblock as no matter what combination of scales I use the end result at best works on Landscape alone. When I try it on portrait, only half the page shows and the user is forced to scroll to the right to see it all. Even if Landscape shows extra white space to the right, I'd love to come up with a way to have the portrait view show all the content with the user unable to zoom either way. Thanks for any help!

Here's what I have so far:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  • 2 Contributors
  • 5 Replies
  • 536 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for Jon_7

Reading through this page, it seems they might have a solution. I can't quite get it to work for me, but mabye it might help here. Thanks to anyone willing to give it a go.

Member Avatar for Jon_7

I figured it out for my site by using 0.6 for all the scale options. There is a lot of white space on the side for landscape, but this will definitely do. I want to leave this question open, however, because I'd love to make it perfect by allowing for a landscape perfection as well. Thanks

Member Avatar for gentlemedia

The issue is not the viewport meta tag, but it's that you're using tables for your layout. Tables for layout was a good solution, when there was no better alternative.... uhm, somewhat from 1995 till 2000 :) Nowadays we use them for what they're intended... to display data.

Edited by gentlemedia
commented: Thx a ton. What should I use instead? +1
Member Avatar for Jon_7

Just googled... So I should use DIV's and Containers??? Sounds complicated. No?

Member Avatar for gentlemedia

You use an element or tag that conveys the meaning of your content.
https://internetingishard.com/html-and-css/semantic-html/

Furthermore to get your layout adapt nicely to the screen width it is viewed on, you use the 3 fundemental building blocks of Responsive Web Design:

  1. Fluid grid/layout (thiis means widths in percentages instead of pixels)
  2. Flexible media (images, videos, etc.)
  3. Media Queries

Learn more here: https://responsivedesign.is/

If you want to center your website you use a container/wrapper.

HTML:

<body>
  <div class="wrapper">
    <!-- all websites HTML here -->
  </div>
</body>

CSS:

.wrapper {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
}
Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.