I’m currently learning the basics of web development and design, and trying to make my portfolio site as both a demonstration of my skills and also as a way to learn those skills more in depth. I’m running into an issue with my site on mobile specifically, where if the user scrolls to the right, there is a column of blank space that doesn’t exist either on desktop, or on emulated mobile on desktop (In my case, a chrome extension that artificially limits the viewport to simulate the limitations of a mobile screen.)
I’ve tried disabling horizontal scrolling on the body of the page to try and rectify this to no avail, and I can’t seem to find any information online about how to fix this, or even what causes it. As far as I can tell (Don’t know how to access inspect element on android) all the elements are their proper size, and display perfectly fine and exactly as expected if the user doesn’t scroll to the right.
Unsure if providing a link to the site (Its currently up in a very barebones format for testing) or a link to the github repo for the project is helpful or allowed. If it is, I will edit my post to include those links, but if not I will just leave my post as is.
Edit:
Github: https://github.com/kylieCrooker/Portfolio
2
Answers
Remove the following line in the section.
This is not performing scaling as you believe it is.
The problem with the blank space is caused by size of your text. The text on your site is taking up more space then expected and you can fix it by adjusting font size or overflow property. This is just sample text anyway, but the issues like this can be fixed with reducing the font size of the text that is causing the column of blank space. Use media queries to adjust the layout and font sizes as the screen size decreases, so you can ensure that your content looks good and is readable on all devices.