I don't really plan on copying the Factorio Dev's by producing a blog post every Friday. But who knows what could happen if we stay busy enough. Carrying on...

So the fun nature of dumping someone else's code into your system is bound to often be imperfect. NibbleBlog has it's own quirks.,And even with the many improvements I found someone had made to the original authors model, I have found several things I will eventually be improving. A web page template is typically sensitive to change. When you preview a design on the creators page, the demo has been made and guaranteed to work perfectly (well... usually). Problems often arise when you change any of the content to your own. Sometimes your sentences don't line up perfectly. Perhaps the paragraph has a finite amount of characters it can hold before the text will run out of it's visually pleasing box. In our case, the width of this template is fixed to 1200 pixels. Not unexpected. This is still common with web pages to have static size limitations, and I was expecting this design would be no different. The behavior of this particular template is, however, the frustrating part.

Example A - The Hideous Bar:

This only appeared on mobile versions of the site. Although I mentioned in the previous article that a mobile adaptation was needed, I hadn't quite expected this kind of a render on my cell phone. When I first released this template to our website, community members reported that it didn't look right on mobile phones. I ignorantly assumed they just meant the text was too small, like they were viewing a desktop version of the site. When I released the blog, the community had reported that the blog looked great on phones! I think it was more a first glance at the formatting though. The blog has started with a side bar on the right page for a little navigation. So the blog article itself was perfectly visible, but the sidebar was cut off or hidden entirely. So naturally, it seemed all-right if you weren't expecting a sidebar. Then I tried mobile for myself.

Since the bar cover was not noticed by others at first, I believed my iPhone to be inferior. It was strange though, that the mysterious bar appeared on the Chrome app, and in Safari. It was then I tested Chrome on my laptop, and used the developer tools to simulate a mobile device. And then I saw it. The hideous dark banner had manifested itself!

Figuring out the problem took longer than it probably should have. Some inquiries to the community were mostly fruitless. I knew it had to be something with the CSS style. Upon extracting a fresh copy of the template, the behavior was the same. So at the least, the problem was with the original developer and not some foolish mistake I had made myself. I tried removing HTML objects piece by piece, I resized them, and I used the aforementioned developer tools to change the css "live" to just plain hide them. The very last thing I noticed, was the footer appears unscathed from this issue. Then, I found it

.container
{
    margin: 0px auto;
    width: 1200px;
}

This width value is the problem for mobile devices. Some of the content is wrapped in this class. The html body is not, allowing parts to expand centered past this value on a wide screen desktop. Any window size below this, and the rest of the objects keep their place, forcing you to scroll horizontally to view the whole page. Yet for whatever reason, this little value is not handled well on a mobile device when the screen width is below this value. If I remove it this CSS line, the site is no longer formatted nicely. If I give the body the same attribute, it's no longer centered. CSS sure can be a pain to work with. I enjoy this look on the site, but surly I'll have to re-write some of it from the ground up to achieve the same look with different methods, that hopefully wont clash in this interesting way.

The solution after, some playing around, has been to discover how the "container" and how the "wrapper" are designed on this layout (developers names for them inside the code). A wrapper is the object which is viewed after the page extends past 1200px, to give a seamless stretch to the sides of content. The container holds the content that should stay centered in that 1200px window. Best I can describe the problem: the template was scripted with some classes in the incorrect locations. There was also a class "div banner-wrapper" (which needs a new name, since it already has a wrapper, and this is technically a container) which had an "overflow: hidden" style line applied, effectively hiding the content when the window width dropped below 1200px , instead of the container object. So put the .container classes in the correct places, and give the "min-width" value to others (like the homepage banner image), and we're in business! 

The template is now sufficiently mobile view-able, even if not in a true mobile friendly way. Now I can move on with my life to greater things! Like an actual mobile compatible make of this web style, or meta data so the blog title and images link correctly in Facebook and discord.

Although the comment system we want is not yet implemented, I am enabling comments for this post in the case you wish to leave some helpful tips for me. Also... I know I need to get the comment CSS formatting corrected, so this is my chance to play with it. Use this privilege nicely! : ) 

-StudMuffin