HelpMeFind Roses, Clematis and Peonies
Roses, Clematis and Peonies
and everything gardening related.
Search PostsPosts By CategoryRecent Posts 
Questions, Answers and Comments by Category
Discussion id : 93-613
most recent 21 JUN 16 HIDE POSTS
 
Initial post 19 JUN 16 by Give me caffeine
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
Reply #1 of 2 posted 21 JUN 16 by HMF Admin
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
Reply #2 of 2 posted 21 JUN 16 by Give me caffeine
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
Discussion id : 93-291
most recent 11 JUN 16 HIDE POSTS
 
Initial post 9 JUN 16 by Puns 'n' Roses
Dear HelpMeFind team,
I have a question about the plant cuttings list. How do I remove a plant? Because a rose I listed is not available anymore.
Thanks for helping!
REPLY
Reply #1 of 2 posted 9 JUN 16 by Patricia Routley
Never having tackled this before, I added a rose to my cutting List.
My name appeared at the bottom of the page. Eventually after clicking on everything, I clicked on my name and a REMOVE button appeared. I am still here - but the cutting wanted item has disappeared.
REPLY
Reply #2 of 2 posted 11 JUN 16 by Puns 'n' Roses
Thank you very much! Somehow I never found that. Now I can properly update my list.
REPLY
Discussion id : 91-318
most recent 6 MAR 16 HIDE POSTS
 
Initial post 6 MAR 16 by Margaret Furness
The glitch re deleting posts is still happening- the post deleted is not the selected one, but the first post in the thread from that member.
REPLY
Discussion id : 90-903
most recent 10 MAY 16 SHOW ALL
 
Initial post 14 FEB 16 by Give me caffeine
Just an observation about long text strings in posts. Example here:

http://www.helpmefind.com/gardening/l.php?l=2.2347.2&tab=32

Discussion id : 90-858, Reply #3 contains a long url. On Gecko it's breaking at the hyphen, but not at the underscores, with the result that the text overflows the div by a considerable amount.

There are a couple of CSS tricks you can use here if you want to. CSS3's word-break attribute is well supported these days. If it's set to break-all it should solve the issue.

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

There are other ways of handling it, but they require some way of targetting the long link. Easy if you have anchor tags in the markup, but HMF doesn't.
REPLY
Reply #1 of 8 posted 14 FEB 16 by HMF Admin
Thanks for bringing this to our attention. Yes, well have to address this and thanks to your technical assistance we should be able to resolve this quickly. Thanks again.
REPLY
Reply #2 of 8 posted 17 APR 16 by Give me caffeine
Just noticed this long link problem cropping up again in one of Jay-Jay's recent posts (Reply #3, Discussion id : 92-078)so I tested some CSS edits in my browser's userContent stylesheet. This works for Firefox or Pale Moon:

@-moz-document domain(helpmefind.com) {
.replies {word-wrap: break-word;}
}

Could be incorporated into HMF's existing stylesheet (http://www.helpmefind.com/css/qcs_1.css) as follows:

div.replies {
padding-left:12px;
border-left:0px solid #E0E2B0;
word-wrap: break-word;
}

That fixes the long links overflow problem without breaking anything else.

(Edited for better solution)
REPLY
Reply #3 of 8 posted 17 APR 16 by Give me caffeine
BTW, if you are going to change the CSS to fix this, it could be simplified to:

.replies {
padding-left:12px;
border-left: none;
word-wrap: break-word;
}

You may also want an additional declaration for Google and Apple browsers.
See http://caniuse.com/#search=word-wrap
REPLY
Reply #4 of 8 posted 17 APR 16 by HMF Admin
Well... you can't get much helpful than that; thank you !
REPLY
Reply #5 of 8 posted 18 APR 16 by Give me caffeine
Welcome.
REPLY
Reply #6 of 8 posted 9 MAY 16 by Give me caffeine
Just adding some extra stuff here, since I can't reply to my own posts and I don't think this suits a separate topic.

Anyway, I've been finding the layout of the photos pages a bit irritating, in that if anyone writes a decent blurb for their photo it gets crammed into a tiny column at the right. This makes it difficult to read, so I threw a few more tweaks at my browser's userContent.css file. I find the result much more convenient. These tweaks can be applied by anyone, to their own browser, if they like this layout. If anyone wants tips on how to apply it, just ask.

The code looks like this:

@-moz-document domain(helpmefind.com) {
.replies {
word-wrap: break-word;
}
#tabContent>table td {
display: block;
}
#tabContent>table .comments {
margin: 0 !important;
padding: 8px 28px !important;
color: #333 !important;
background: none !important;
border: none !important;
}
#tabContent>table td:first-child, #tabContent>table td:first-child div {
text-align: center !important;
}
#tabContent>table #comments>.comments {
font-size: 100% !important;
line-height: 1.5em !important;
}
#ratings td, #tabContent>#ratings td:first-child,
#plantCuttings td, #tabContent>#plantCuttings td:first-child {
display: table-cell !important;
text-align: left !important;
}
}

And the result look likes this:
REPLY
Reply #7 of 8 posted 10 MAY 16 by HMF Admin
Yes, that is a nicer display format. We'll incorporate it in the near future. Thank you this and your several other much appreciated suggestions,
REPLY
Reply #8 of 8 posted 10 MAY 16 by Give me caffeine
No problem. I just did it for my own benefit anyway. That code is specifically for overriding the existing site code in one's own browser, so it's too verbose for use as actual site coding. It wouldn't make sense to use the same code directly in the site's CSS file. You could get a leaner result by just tweaking the markup a bit.

I'd lose the table and change the markup to a few paragraphs. You could give the image an auto x margin to centre it up top, then three paragraphs beneath for the photo id, blurb and copyright respectively. The <img> and <p> tags are block level anyway by default, so don't need to be wrapped in anything else. So markup could just be:

<div id="tabContent">
<div id="mylstg"> ... </div>
<img ... />
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>

Then you can do the CSS as just:

#tabContent>img {margin: 10px auto;} /* The 10px y margin is just an example */
#tabContent>p {padding: 0 28px;}
#tabContent>p:nth-of-type(odd) {font-size: 90% line-height: 1.1em;}

Shouldn't need anything else, AFAIK.

Edit: Although you may still want the id="comment" on the second p tag if your back end coding relies on that to call the correct db content. Can't see any need for classes in this case though.
REPLY
© 2017 HelpMeFind.com