Category: HTML and CSS

I just updated a site so that it works better on phones and tablets. While updating I also cleaned up a lot of old code. In the process of cleaning up many of the old pages are no longer valid. Rather than redirecting to a generic page, I can redirect certain links to specific missing link pages. This is what I did for old manuals pages that I moved.

<?php
$oldurl = $_SERVER['REQUEST_URI'];
// Redirect requests for manuals
switch ($oldurl) {
  case '/products/mobile/manual_1.php';
  case '/products/mobile/manual_2.php';
  case '/products/mobile/manual_3.php';
  case '/products/mobile/manual_4.php';
  etc.

    header("Location: https://www.wellgolly.com/products/manuals_mobile.php",TRUE,301);
    break;
}
?>
<div  class="centered">
<h1>Error 404<br />Document not found</h1>
    <img class='pure-img-responsive centered' src='/images/sad.png' alt='Sad' />
    <p>We’re sorry, but the page you requested could not be found.<br />
    Please use the menus at the top or bottom of this page to find what you are looking for.</p>

</div>

By parsing the $oldurl, you can redirect missing files from sections of your site to a missing page that can help your visitors find what they are looking for rather than just a generic page.

I get a bunch of these warnings in my logs and wondered what they were.

Command line: '/usr/sbin/apache2'
Loading CGI at runtime.  You could increase shared memory between Apache processes by preloading it in your httpd.conf or handler.pl file

From a Mason mailing list it looks like it is caused when Mason is loaded each time it is needed rather than when Apache starts.
“may be a recommendation that comes from HTML::Mason::ApacheHandler2.”

I have one set of pages only site that use Mason so I’m not going to worry about it.

When the iPad is in portrait mode, the hamburger menu doesn’t display. It works in the Responsive Design Mode simulator in Safari but not on real iPads. The fix is to change the min-width to 49 em in side-menu.css.

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 49em) {

When porting a website so that it displays well on phones, I ran across a problem wrapping long text without breaks. This text doesn’t wrap so the whole page gets a horizontal scroll.

<p class='break-word'>On my Windows 7 and 8 computer, with a login name of llsc the location that shows up in the top bar is:
Users\llsc\AppData\Roaming\LocuTourMultimedia\Client Manager\Data
</p>

I added a break-word class to my CSS and it works fine.

.break-word {
    word-wrap:break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

When redesigning a site, I was having trouble getting one section to fit on an iPhone 5 without horizontal scrolling. It turns out that there were two issues, one with the Facebook widget and—rather ironically—one with the iTunes App ad.

The ad is in an iFrame and the dimensions are hard coded. e.g.

echo "<iframe src='https://banners.itunes.apple.com/banner.html?partnerId=0419Dm&amp;aId=&amp;id={$app_ID}&amp;c=us&amp;l=en-US&amp;bt=catalog&amp;t=catalog_white&amp;w=300&amp;h=250' style='overflow-x:hidden;overflow-y:hidden;width:300px;height:250px;'></iframe>";

Changing the dimensions either results in a cropped ad or nothing at all. I did however, stumble upon a solution. I reset the iFrame to 80% of the view window.

iframe {
  max-width: 80vw;
  max-height: 80vw;
}