So it doesn’t look like huge progress from last week but once again it’s taken a bloody long time to get this far. I really hope I can get this done in time, I’m starting to sweat a bit now – only two weeks!
In the last week I spent a lot of time working out how to make the green boxes an equal size. It turned out to be so simple – I created classes for .work_logo and .work_item for the individual boxes and set the height to 550px. I’m not sure if using pixels here is going to be a problem responsive-wise so I’ll need to check that but it works for now at least.
One nagging problem I’ve had that I haven’t yet been able to solve is getting the thumbnail images to vertically align within their boxes. I’ve tried using vertical-align:middle (another W3Schools tip) but it’s not having any effect. Perhaps I need to look at how the classes are set up here again and maybe do some more nesting or something.
The text has also gone quite small and is not aligning correctly within the green boxes. It was fine before so something I’ve done has knocked that out of whack but I’m not sure what. Maybe the pixels thing? More trial and error required methinks.
I also decided to remove the white navigation circles in the top section. They didn’t really add any value as the main header navigation is so close anyway, so I figured they were surplus to requirements.
I added an additional green strip in as a header for the My Work section too which created a bit more space and helped me with aligning the text in that section, which was not playing ball for a while. I figured this one out myself (after several hours of banging my head against a wall). Despite the many frustrations I do find it satisfying when I have a breakthrough, I must admit.
Maybe there’s a coder in me after all… 😀