Working on my Product Landing page – adding the footer and some more media queries to improve the mobile responsiveness of the page.
You can view my progress and my code on CodePen here. The original page that I need to replicate as part of the challenge is here.
What I have done:
Added the footer – an unordered list, with a <span> tag for the copyright section
Worked on the mobile view, using the @media query to adjust the top navigation and the pricing table to make it a single column
What I have learned:
I put all of the media queries at the bottom of the document as it makes it easier to find them and update them, and it stops the other formatting accidentally over-riding them in the style sheet. The mobile view looks a lot better, but it still needs work. The YouTube video (in an iframe) doesn’t adjust yet and so means the page scrolls across in mobile views.
I am still having trouble with the top navigation links – when you click on ‘features’, for example, the top of the text is partially obscured by the top menu. It jumps to the id and puts it at the top of the page, rather than to the top of the area that the user can see. I asked for support in a Discord group as I was having trouble with this (and the original page does this too – I just don’t think it looks very good) and was given a couple of suggestions:
I tried using the z-index element to change the priorities of the page layout – this didn’t seem to make any difference to how the links functioned.
The other suggestion was to add (for example) padding-top: 80px between each of the sections I am linking to – this would show a large gap between each section, but it would mean that there was enough of a gap between the sections that it would be pushed down the page enough to be seen under the top navigation. This isn’t a perfect solution, as it means that there is a lot of additional white space on the page, but seems to be the only way around this for now.
I will try to do some more research into this and see if I can find an alternative solution that seems to work a little better and looks more tidy – mostly just for my own peace of mind.