HTML Notes: Apache support for responsive HTML

File Displays

Before we begin, compare these three example directories

Notes:

  1. The first URL demonstrates what you might see if your site is hosted on a shared service
    • only the first 20-characters of each filename are shown
    • since the description column is fully blank it would be nice to ditch it
    • performing a View Page Source reveals all data is rendered between <PRE> tags with lots of white-space
  2. The second URL employs a tweaked <Directory> statement in file: /etc/httpd/conf/httpd.conf
    • first column to be as wide as the longest file
    • I didn't remove description or timestamp but it would be easy to do so
  3. The third URL is full responsive
    • the complete filename is present
    • I removed the "description column" to save horizontal space
    • I also removed "size column", "last-modified column", and file-type icon
    • performing a View Page Source reveals:
      • all data is rendered inside an HTML table (which greatly reduces white-space)
      • a meta statement in the document head sets a viewport

My solution

  1. Rather than yak on about all the steps I took, here are some excepts from my Apache config file here: "/etc/httpd/conf/httpd.conf"
  2. use this command "sudo apachectl configtest" to check the syntax then "sudo apachectl graceful" to restart your server
  3. If this works for port 80 then be sure to also update file "/etc/httpd/conf.d/ssl.conf for port 443
  4. now reissue the graceful restart

excerpt from: /etc/httpd/conf/httpd.conf

<Directory "/var/www">
# === conservative ===
# Options Indexes
# === liberal === Options All Multiviews
# =================== AllowOverride None Order allow,deny Allow from all
# ===================
# Not Mobile Friendly # IndexOptions FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=*
# =================== # Mobile Friendly: IndexOptions FancyIndexing
IndexOptions HTMLTable
IndexOptions FoldersFirst
IndexOptions NameWidth=* IndexOptions IgnoreCase IndexOptions SuppressDescription
# Additional changes to reduce width IndexOptions SuppressSize Indexoptions SuppressLastModified Indexoptions SuppressColumnSorting IndexOptions SuppressIcon
# need this meta statement in the HTTP header IndexHeadInsert '<meta name="viewport" content="width=device-width, initial-scale=1" />'
IndexStyleSheet "/css/nsr-folder-default.css"
# (optional) ditch the parent link
# IndexIgnore ".."
# =================== </Directory>

the css file

* {word-wrap:break-word;}
body {font-family:sans-serif;background-color:#fff;margin:0;padding:0;}
pre {font-family:monospace}
a {text-decoration:none;color:blue}
a:link {text-decoration:none;color:blue}
a:visited {text-decoration:none;color:blue}
a:hover {text-decoration:none;color:blue;cursor:pointer}
a:active {text-decoration:none;color:blue}
a.nsr {text-decoration:none;color:blue;display:inline-block}
a.nsr:link {text-decoration:none;color:blue;display:inline-block}
a.nsr:visited {text-decoration:none;color:blue;display:inline-block}
a.nsr:hover {text-decoration:none;color:blue;display:inline-block;cursor:pointer}
a.nsr:active {text-decoration:none;color:blue;display:inline-block}
table       {border:1px solid gray;border-collapse:collapse;padding:4px}
table tr th {border:1px solid gray;padding:4px}
table tr td {border:1px solid gray;padding:4px}
h1  {color:red;font-size:100%}
pre {padding:4px; margin:0; border:1px solid black; font-weight:bold;
	overflow-x:auto; line-height:24px; font-size:100%; max-width:99vw}
/*
**	for a responsive page
*/
@media screen and (min-width:400px) {
* {font-size:10pt;}
}
@media screen and (min-width:768px) {
* {font-size:12pt;}
}
@media screen and (min-width:1000px) {
* {font-size:14pt;}
}

Links


Back to Home
Neil Rieck
Waterloo, Ontario, Canada.