I’ve created this Personal Portfolio Website as part of the CodeCademy course. It seems to work fine on a laptop screen.
However, when it comes to viewing it on a mobile device the footer of the website shrinks to the left. I don’t understand the reason why it behaves like that. Can anyone give advice on how to fix it ?
Hi, there!
Welcome to the forums!
What you’re experiencing is not a problem with your footer. When elements have a fixed width, they are not responsive. So, when the screen shrinks, these elements cause issues with page responsiveness. The same thing can happen with margins and padding.
The easiest way to debug your CSS is going to be with the browser dev tools. Look at each element to see if it is causing overflow issues. To get started, you should look at your hero image.
However, it may be worth changing your CSS from desktop first to mobile first. While I did get the mobile view to display correctly with dev tools, doing so with media queries may be annoying. This will require scrapping a few lines and maybe an overhaul, but it will give you a good experience and a better understanding of why mobile-first design is easier to work with.
If you require more assistance, please ask away!