Wed, 2018-04-04 15:18
Hi. This page:
http://sheffieldtrauma.com/aboutmnew.html
and this css file:
http://sheffieldtrauma.com/traumam.css
On a menu (left usually, centre top on smaller screens) some of the sub-headings are inset, like this:
.main-nav-indent a {padding-left: 30px;}
and called in html like this:
<nav class="main-nav"> <ul class="main-nav-ul"> <li><a href="index.html">Home</a></li> <li><a href="trauma.html">Trauma</a></li> <li class="main-nav-indent"><a href="trauma3phase.html">3 Phases</a></li>
(The indented line is the bottom one)
So...
Testing on chrome, and on firefox on my laptop everything is fine and dandy, and when my screen drops below a width of 640px the menu goes to the top under the header, and the submenus continue to indent.
On my 'phone, though, things go all quirky.
On firefox, all good, but on chrome on my Samsung Note 4 doesn't indent the subheadings at all
Also, the Note 4 is a claimed 1440 x 2560 pixels, and yet the screen behaves as though it is less than 640px.
Sorry, the second question just occurred to me as I was typing, and may not belong here.
Thu, 2018-04-05 03:07
#1
Too many classes for nothing
Use html properly and you'll have the advantage of the cascade.
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style media="screen"> /*<![CDATA[*/ body, html { font: 100%/1.5 sans-serif; margin:0 padding: 0; } p { font-size: 1em; } ul { padding-left: 0; margin-left: 0; /* for legacy IE and Opera */ list-style-type: none; } ul ul { padding-left: 2.5em; } /*]]>*/ </style> </head> <body> <h1>list indention</h1> <ul> <li>1st item</li> <li>2nd item <ul> <li>sub-item</li> </ul></li> <li>3rd item</li> </ul> </body> </html>
Try to clean up all those unnecessary classes.
gary