Once I finished the news page, I spent the rest of this week working on the site’s portfolio page and deciding on a layout for the individual project pages.
For the portfolio page, I originally used a basic grid layout, but given that the images vary depending on the genre (playbills and film screenshots of various aspect ratios, for example), I decided I needed to look for a more variable gallery layout and Dr. Google led me to css-tricks.com once again where I found this useful flexbox adaptive layout.
The example uses an unordered list, but I already had my images laid out in figure elements, so I adapted it to suit and tweaked until it looked more or less how I wanted it. Given that I’ll likely be having to add to the main page soon, it’s good to have a set format that will absorb any new additions without too much fuss:
From there it was just to settle on a layout for the individual portfolio project pages, which would’ve been relatively simple, but for the fact that the embedded FB video broke a good bunch of my layout. I knew I was going to have to address the fact that it had fixed sizing when I added it to the page, but it took me a while to put two and two together because it even messed up my fixed header, so I spent a lot of time looking for a missing semi-colon or errant bracket somewhere.
Once I pinpointed the issue though, it was no trouble to find a fix to make the video iframe adaptive at w3schools.com and tweak it to suit.
I also had some media query maintenance to do, given how the tweaks here and there tend to throw things off a bit.
Next week, I’ll finish building out the individual profile pages, which will go lots quicker now that I have a template (though I’m still hunting for the content, which does take some time) and figure out what to do with the contact page.
undefined 