Formatting of the guide section

[GraceCCSI]

Front-end OLC organization issue @SamCCSI @man-git007 @anjesh @charlesyoung

The formatting of the guide section on the “Using This Site” page (English) is slightly out of order since Kimathi added the ESIA guide

Kimathi believes it to be an HTML source code issue, as the page editing box in the site administrator view does not show the same problem as the visitor page view

Thanks so much for your help! Also, my name is Grace and I am the new program associate replacing Kimathi. Looking forward to working with you!

[jedm]

Hi @GraceCCSI @SamCCSI et al

Please excuse my jumping in to the thread. Since I worked with Sam and YI on the formatting of these pages I thought I could help. I looks like there are a few div tags missing in the source code that could fix the problem.

The yellow highlights in the attached are the code to try inserting.

(You will also see the P tags highlighted in the ESIA text - in blue. It may be that you also should remove the P tags and add two BR tags at the end (as in several other Guide descriptions on the page. This may or may not relate to the column display problem.)

I hope all are well on both teams. Hope this is useful!

Jed

Jed Miller | 3 Bridges jed@3bridges.org jedbmiller@gmail.com

OLC_Guides_divs_3B.pdf

[GraceCCSI]

Hi @jedm

Thanks so much for your help. I made the suggested changes and there still seem to be some issues. The ESIA and other guides remain in a column format, rather than a horizontal row format as the "Guides to Land Contacts" is in. Also, the video tutorials are overlapping. How can I make it so everything is in a horizontal row format, and the tutorials no longer overlap? Thanks again!

Grace

[jedm]

I will try to take a look again today.

On Mon, Aug 29, 2022 at 11:24 AM GraceCCSI @.***> wrote:

Hi @jedm https://github.com/jedm

Thanks so much for your help. I made the suggested changes and there still seem to be some issues. The ESIA and other guides remain in a column format, rather than a horizontal row format as the "Guides to Land Contacts" is in. Also, the video tutorials are overlapping. How can I make it so everything is in a horizontal row format, and the tutorials no longer overlap? Thanks again!

Grace

— Reply to this email directly, view it on GitHub https://github.com/NRGI/resourcecontracts.org/issues/1527#issuecomment-1230470375, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAQNZQD3V26JM3IE2Y2B5RTV3TIZXANCNFSM57XNGAXA . You are receiving this because you were mentioned.Message ID: @.***>

-- Jed Miller | @jedmiller http://twitter.com/jedmiller m +1.917.584.2349 | s @jedbmiller www.jedmiller.com

[GraceCCSI]

Thanks! Looking forward to hearing from you. Let me know if there's anything else I can do in the meantime.

Grace

[jedm]

I made a little progress but it all has to do with the

[GraceCCSI]

I have very basic HTML knowledge so I will check out the

[GraceCCSI]

Sorry it looks like some of the test disappeared - probably because of the commands. Where should I close the div tags and where should I insert the br clear text?

[jedm]

Hi @GraceCCSI,

I fixed what I was able to fix. There still could be some DIV and SPAN tags that you do not need, and the font sizes are still not totally consistent (any chance you are cutting and pasting the code from another tool?). But the sections are now running vertically in sequence, not bunching up at the bottom.

Definitely worth a further look by one of the designers at CCSI/Earth Inst, NRGI or YI if they can accommodate.

Hope this helps!

Jed

On Tue, Aug 30, 2022 at 2:24 PM GraceCCSI @.***> wrote:

Sorry it looks like some of the test disappeared - probably because of the commands. Where should I close the div tags and where should I insert the br clear text?

— Reply to this email directly, view it on GitHub https://github.com/NRGI/resourcecontracts.org/issues/1527#issuecomment-1232012180, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAQNZQDEI4VYIVW6Z2ELCMTV3ZGVJANCNFSM57XNGAXA . You are receiving this because you were mentioned.Message ID: @.***>

-- Jed Miller | @jedmiller http://twitter.com/jedmiller m +1.917.584.2349 | s @jedbmiller www.jedmiller.com

[GraceCCSI]

Hi Jed!

Thanks so much for your help with this. Everything looks great except for the "Briefing Material for Civil Society Organizations: Bridging the Information Gap" section which is still formatted in columns. I can take a look tomorrow and try to emulate the HTML code for the other reports. Any suggestions on how I might restructure that section would be appreciated.

Thanks again for your help!

Grace

[GraceCCSI]

Hi again @jedm ,

After much html trial and error while relying heavily on your advise, I managed to get fix the formatting. It is not perfect but it is readable and fairly consistent. Thanks so much for your help again. I really appreciate it.

Have a great rest of your week,

Grace

[jedm]

Nice work, Grace! It looks good to me.

I see you have the extra indentation and I agree with what (I assume) you decided, that everything else looks so good it is not worth touching it more and risk changing it!

If you decide to look at it further, I suspect there are just some close DIVs missing where I've marked in the attached. But I commend your choice to stop. Code is tricky enough and stylesheets and WYSIWYGs make it even tricker.

Glad you got to something workable!

All best,

Jed

[GraceCCSI]

Hi @jedm ,

That was exactly my thinking in deciding to sop working on the website code. I'm sure you also understand how finicky html can be. Thanks so much for that last piece of advice - that is a much simpler fix that I had anticipated! I'll try closing some divs.

Thanks again, Grace

[GraceCCSI]

Hi again @jedm ,

Sorry to flood you with messages but I closed two divs and the website is perfect now! Thanks SO much. Success with html feels unbelievably rewarding.

All the best, Grace