FCC My Technical Documentation Page

FCC My Technical Documentation Page
0.0 0

#1

Hello,

i would be very glad if i will collect some feedback from you.

Thank you so much.

Mirko


#2

Hello Mirko,

Just checked your work mate, and you know what? I think this is avery good work, well done comrade.

There is a layout issue for the mobile view, it’s broken. But this is becasue of two thing, which one oculd be fixed very easy.

One reason is becasue of long text content without any space, so browser won’t find a way to break the line, and had to give more size to the container to show the text, that lead to horizontal scrolling.
Please check:


Just check that long text line as document.getElementById("demo").style.fontSize

One solution is using the word-break:break-all which allows the browser break at any section it finds break needed, another way is using <wbr/> tag, wbr tag is same as br tag, but it doesn’t apply a new line(break) when not needed. Considering following example.
document.<wbr/>getElementById<wbr/>("demo").<wbr/>style.<wbr/>fontSize
It means try to draw the line in one line, but if it needs to be broken, you can break it from locations wbr tags are.

Another reason is width: 100%; for your code tag, please note, as your code is a block(display:block), by default it first to its parent, and you may not need to set width:100%.

Next reason is using table in your page, even table look cool, but they are not very responsible in heart. table could break your layout(as already did) when they need some notable space for rendering. You Comparison Operators table just did the same thing.

I suggest you come up with something else and replace those tables with grid for instance.

TIP: for desktop, you can bring table like layout (rows and columns) with grid, but as screen goes smaller and smaller, you may turn two columns into one. Or in other word, turn columns to rows, considering following example:

//desktop view:
+----+----+----+
|A0  |A1  |A2  |
+----+----+----+
|M0  |M1  |M2  |
+----+----+----+
Mobile view:
+----+
|A0  |
|A1  |
|A2  |
+----+
|B0  |
|B1  |
|B2  |
+----+

I admit it may make it hard to read, but I think having a good layout is in first place.

I would also note one issue about your main css, please check following is your css rule for the main tag

#main-doc {
    position: absolute;
    margin-left: 20%;
    padding: 20px 20px 20px 40px;
    width: 75%;
}

By default, browser, use and add margin, padding & border-width values for calculating the target width, so your width is 75%, you have 20% for left margin, and 20px(left)+20px(right) padding.

So it means the target width will be 75%+20%+40px which could be over 100%, and it means layout break, and horizontal scroll.

Fix is easy pal
TIP: using box-sizing:border-box asking the browser to let that 70% width be for all width+padding+margin, so yout 70% will never causes a scroll and layout break.

But wait, now as you used box-sizing:border-box, let’s have another calc to check how much width will be for the main, now it’s 70%, and as it has 20% margin from right, so 10% is wasting. So you may go for 80% for width then.

Another TIP: again, since main is a block element, so you may simple remove width, so it automatically fits to its parent(also box-sizing:border-box is not required too)

When in mobile view, You may let the main goes for 100% of the width. add box-sizing: border-box; for #navbar css rule too.

i suggest you may not limit the height of the navigation bar when in mobile, scroll something inside a scrollable element is a little hard for mobile, but this is my opinion, you may ignore.

Another suggestion I have is placing one horizontal line after each title(header tag) of content in reading panel, it makes it easier to scan the page content for user.

For inline code section, I suggest you use monospace font, with a dedicated background colour just like block background too.

I liked your work, but about the layout, I suggest you recheck it and maybe later(I suggest) start a new one comes without any table tag, and completely responsive.

Keep going on great work my comrade, happy programming.