|
|
Questions, Answers and Comments by Category
-
-
|
Another minor coding suggestion for you. At the moment the html element for the site has a fixed width of 1000px (see Line 19 of http://www.helpmefind.com/css/hmf.1-3.css).
That's fine on desktop, but not so good on mobile devices. A full responsive revamp of the site would be a lot of work, but there's a very simple change you can make so the site will fit nicely on a standard tablet in portrait mode, and even a small tablet in landscape mode.
All that's required is to remove the set width of 1000 px. There's still a max-width of 1000px set, so the site won't exceed that anyway. It's only the width: 1000px; that is stopping the site scaling for width down to 768px or even less, so removing that would make the site fit nicely on tablets. It'll even be quite usable on an iPhone in landscape mode, although things will be a little bit scrunched.
So that's a useful increase in site usability for a one line code change that doesn't require significant technical skill.
TBH though I'm not sure why text-align: center; is set since that will have to be overridden later so that text displays left-aligned. AFAICT all it really needs is this:
html {
max-width:1000px;
margin:0 auto;
padding:0;
background-color: #fffffb;
}
|
REPLY
|
|
Thank you. As you noted, HMF is not oriented for mobile use as of yet. Your suggestion is an excellent stop gap. Thank you.
|
REPLY
|
|
Come to think of it, you'd need the relevant meta tag up in head too.
<meta name="viewport" content="width=device-width" />
I don't think it would actually need anything else (can't test it properly on tablet without the tag).
Although if you get enthused you could kick the reply and add photo buttons down beneath the post content on smaller screens. That keeps things clear down to 530 width, as long as you scroll the left menu bar off the screen.
@media screen and (max-width: 770px) {
table.qc th, table.qc td {
display: block;
position: relative;
}
table.qc th {
border-left: none !important;
}
table.qc th .lnkbtnQC:nth-child(2) {
position: relative;
left: 155px;
top: -1.6em;
}
}
|
REPLY
|
|
