HTML Notes: Apache support for responsive HTML

File Displays (file indexing when index.html is not found)


When "options indexes" is defined for a directory, then a file listing will be presented whenever file "index.html" is not found. This is fairly old technology which was implemented before responsive web so you might need to jump through a few hoops to make it look pretty (and add a viewport) 

My solution

  1. Rather than yack 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 (or "sudo systemctl restart httpd")
  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;}


Back to Home
Neil Rieck
Waterloo, Ontario, Canada.