I found this one quite time-consuming in terms of getting content in and formatted and also bit tricky… initially, I had missed the requirement about having a fixed sidebar on desktop, so my first layout was using grid for columns. I had to rework everything at the end. I also got caught out on the headers requirement for each section and had put in h2 and h3 headings which I had to remove to pass the tests.
I found using code/pre elements interesting since there were some unexpected behaviours there with sizing etc… There’s one outstanding thing I couldn’t figure out - I can’t seem to get good spacing on the right-hand side of the pre elements:
The text in those sometimes sits right at the edge when it scrolls horizontally and I couldn’t find a way to use padding or margins to add a little gap.
Any feedback on that, or anything else would be most welcome, cheers!
Wow… it looks awesome! I love what you did with the code/pre elements. Love the pop of colour on the left. This is probably one of the best ones I’ve seen. EVER!
I’m not seeing this problem. Did you get it fixed?
This is a very nice job. Not a lot to critique here. One minor issue is that you are not allowed to have another list as a direct child of a list. In the nav list you must wrap the <ul> in a <li>.
No, I didn’t manage to fix the spacing thing, but I tried a few different browsers and found it was more of an issue in Firefox compared with Chrome etc. So probably some default browser stuff I would need to override. I don’t think I’ll spend much time on that now though, as I’m eager to move on to the next project!
Good catch on the lists, I was going for a sort of sub-list thing and hadn’t realised I was breaking the rules there. Appreciate it!
I sorted the list and used an HTML validator (need to get in the habit of doing that) which found I also had some other stray closing tags etc. from when I rejigged everything. I also managed to re-add h2/h3 within the headers and the tests passed now, so a good lesson to check things and make sure everything is valid and tidy!
Thanks @sowg! I was only seeing the scrollbars when the width of the screen was too narrow for the content. I just did a bit of research and learned that it may depend on your OS as to whether they show or not.
I have tried using overflow: auto; instead which hopefully would mean they only show for you when they need to.
I was using scroll before which apparently means you see a scrollbar even if it’s not required, except it sounds like that can be OS dependent (going to try on a different machine tomorrow).
the cyan colour line! It makes it look like blockquote
! I was only seeing the scrollbars when the width of the screen was too narrow for the content. I just did a bit of research and learned that it may depend on your OS as to whether they show or not.