Hi,
I have followed the project: https://www.codecademy.com/courses/learn-html/projects/html-wine-festival-schedule
The correct page should look like here: [https://content.codecademy.com/courses/learn-html-tables/index.html?_gl=1*fgh12p*_ga*Mzk1OTUxNDIxNC4xNjY5MTMyMjYw*_ga_3LRZM6TM9L*MTY4MDk1MTMzOS4yLjEuMTY4MDk1MTU5My4wLjAuMA…]
My workspace in codeacademy shows no issue with the output.
I used the same code in VSCode and started live server. The output somehow did not fit to the page,
I had the option to scroll down in the page, still it could not show me the bottom of the table. When I set page Zoom settings from 100% to 80% only it gave the desired look.
Anyone knows where I should look to fix this problem?
Thank you!
It’s an issue with the default css that is included with the project. The footer element has it’s position set to fixed around line 52 or 53. This causes the footer to be displayed at the bottom of the screen as the page scrolls. If you want to fix this then you can delete the position: fixed; line from the css file. It wont be perfect but it will be close.
I think that they are working around this with a script located at the bottom of the example sites html file and in how they render the page in the lesson. Like you I’m still learning all this so I’m not exactly sure what they are doing.
Hope this helps a little.
1 Like
Thank you very much! As you said deleting helped, I could not see the whole table fit into the page, but I could atleast scroll down to the bottom of the page. I also found out by setting position:relative, sticky, or static helps too.
