Hacker News Reader

Comment by SeanDav | Hacker News Reader

How does one go about editing the display parameters?

I am a complete neophyte at this, but tried pressing F12 to access various debugging tools. I could not find any reference to the comments.

Also interested how you discovered this in the first place?

View on HN

In chrome, I right clicked on the body text and hit "inspect element". That brings up element inspector with the relevant element highlighted. The highlighted div had the id "comments". Hovering over that element in the inspector pane shows you the dimensions of the div in blue and the padding in green in the main windows. This makes it pretty easy to see that the comments div is covering everything else.

The css for #comments in the inspector pane doesn't specify dimensions for the div, so it should be the size of its child elements. None of the child elements overlap the body text or sidebar, so something else is causing the parent div to cover those elements.

The div directly before #comments is the sidebar, and clicking on it in the inspector pane shows the css floating it.

I then just added a clear: both to #comments using the inspector and it fixed the problem in the main window. You can add css to an element in the inspector in chrome by hitting the "+" in the right-hand pane (there are other ways, but that's probably the easiest).

The easiest way (in Chrome, but other browsers will have something similar) is to right click pretty much anywhere on the text and click "Inspect Element". The developer tools will come up with that element in the DOM highlighted (it is a div element with id "comments"). The easiest thing to do is then to right-click on that element and select "Delete Node".

By the way, when the "what can we do now that we couldn't do in the 90s" debate comes up it always occurs to me that the majority of the applications I use are far more malleable due to being web applications built on its fundamentally open (if admittedly complex and fragile) tool set. So instead of thinking "well, this UI sucks", I can actually fix it myself if I care enough to.

You see that the text is not highlightable. In Chrome, for example, you might right click that text and select "Inspect element". You can see that while you clicked on a paragraph of copy, the element that gets inspected is the #comments div, which should live below content of the article. Under the "Styles" tab of the right pane of the developer tools, you can modify existing css rules or enter new ones under element.style or #comments if you like. Adding a "clear: both" rule fixes the issue.

(In Chrome) If you right-click anywhere on the text and select "inspect element" it will select the #comments div because it covers the whole page. Then on the right-hand side of the dev tools you can add to "element.style". Adding clear:both; to this fixes the issue.

Reply on news.ycombinator.com