HTML Notes: Apache support for responsive HTML

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

Notes:

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;}
}

Links

Back to Home
Neil Rieck
Waterloo, Ontario, Canada.