Why does this CSS produce such a huge layout when displayed on a smartphone?

Question

I have this CSS: https://cal-linux.com/styles/tutorial.css

And a sample page that uses it: https://cal-linux.com/tutorials/gswc++.html

When I display this on a smartphone (or when I check it through Google's Mobile friendliness verify service), the layout looks huge (badly cropped, instead of reduced to fit the smartphone's screen.

I only use proportional measures (for example, outsidecontainer's div has width 80%, inside right-most column has min-width 25%). I'm placing Google Ads in there, but it's a "Responsive" add, which is supposed to adapt to the page's available size and layout.

Any tips on this? I figured posting the actual links to the pages might be ideal; but please let me know if a "minimal" instance of code that reproduces the problem would be preferred.

Thanks,

Cal-linux

Answer 1

There are a few things I note here:

1. You use display:table-row and display:table-cell a bit too much. Those don't respond as well to the resizing especially if you have not specified the width of each item. Instead either use floats with a clear:both on the container's :after pseudo-element or inline-block. Either way you should define percent widths for the containers.
2. Your css has a lot of white-space:nowrap but doesn't use overflow:auto which forces the element to not resize the content and just stretch its parent container.
3. Aside from that a few places I see a fixed px width which makes it more difficult to resize. It doesn't seem to be your ads. Although google's script does throw an error about trying to put an ad in an 86px x undefined space. You can set a fixed height or at least a min-height to give the script an idea of how big an ad should be placed there.

The easiest solution is to incorporate bootstrap to do the heavy lifting of setting up a grid for what you want.

You can basically do your two column style like so:

<div class="container-fluid">
  <div class="left-col col-md-11">
     <!--- ALL YOUR CONTENT HERE //-->
  </div>
  <div class="right-col col-md-1">
     <!---Google Ads go Here //-->
  </div>
</div>

If you want to stick with your own style, by using the code inspector in chrome I was able to get to the following result when resized:

• I made the tablerow class be a standard display:block
• The first column was set to width:75%; display:inline-block;
• The second column was set to width:25%; display:inline-block;
• The autosize elements changed to display:block;max-width:100%; overflow:auto;width:auto;padding:0
• The div.code blocks were changed to display:block;white-space:nowrap;width:auto;

Everything else stays the same pretty much. That should fix it, however you should note that frameworks like bootstrap help out with mobile sites by making the page columns collapse and go one ontop of another for mobile browsers so that they get maximum space.