Dev Diary: ITP Day 6

After a marathon of coding, debugging and pulling my hair out - I don’t have hair on my head so take a guess at where it came from - today, my main focus is to fix the issue of extra padding that is presenting itself on the mobile layout. It looks like 20 or so pixels on the right. You don’t see it when you first come to the page, but it’s there - especially when you enter a search term which causes the entire page to shift left - and I’d like to squash all of the bugs that I can before moving to the next phase of development.

Debugging

I’m really starting to like the Safari Mobile Developer tools. Previously, I used Adobe Edge Inspect but I’ve found the tools in Safari more intuitive.

I especially like the fact that I can just hit refresh from my keyboard and the browser on the device is refreshed. No more picking up the phone just to hit the refresh button. I know it doesn’t seem like much, but small things like that go a long way - especially when you are frustrated by an inability to diagnose an issue that should be simple to find and fix.

I can see where the Safari developer tools could be limiting, I believe you can only specify one device to access at a time, but for now, that works fine.

My first course of action was to remove content sections until I found the offending section. It was pretty quick work. I found it in the first section - the header / navigation. Unfortunately, I suspect that fixing the problem will be harder than finding where it resides.

Found it!

Apparently, all I needed to do was add the following to my header css rule.

1
.header {overflow: hidden;}

Well, that was easy. I wish I would have tried that last night. Sometimes, I feel like such an idiot.

I also floated (aligned) the hamburger - I believe that is what I’ve heard the navigation icon with three bars called - to the right and the text logo to the left. This allows the menu icon to move over to the right in landscape mode while keeping the logo on the left. This wasn’t a big deal in portrait mode because the width was prefect for the two items to live side by side without making one look like it was improperly aligned.

InThePanhandle.com Header Nav - Day 6

More Style

In addition to finishing the header, I also added styling to the news article pages, specifically the paragraph and h1 tags. One of my goals was to make text more readable on a small screen. I think that has been accomplished through ample padding and a nice, readable font and font size.

I haven’t done anything with the desktop version so it still looks pretty bad. But, no time for that… I’m off to the computer lab to help a bunch of kindergartners with their computer lessons.

I Lied

I know I said I had to go and that was it but, I decided I wanted to show off the work that I’ve done so far. For the last walkthrough I used the Xcode iOS Simulator and Screeny. This allowed me to simulate using the phone while recording it. The final result was a .MOV file which I then turned into a GIF using GIFBrewery.

After a bit of searching, I found the amazing Reflector App. I watched about 30 seconds of their demo video and I was sold. Check out this demo that I made showing off the fixed header, navigation, search and basic news article formatting.

Road Map

Next, I’m going to address the following issues / areas:

  • Desktop Styling of p and h1 tags
  • Footer styling - both mobile and desktop

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins