I’m trying to make my portfolio mobile-adaptive because right now it’s very horizontal! I’m using an image as my background and I want to call up a vertical-friendly one for screens below a certain width. Is this a CSS problem, an HTML problem or a JavaScript problem? All insights welcome!! https://katelyngreller.github.io
Hi there,
I looked at your site on my phone and the project itself looks fine to me. Are you talking about the blank space on the front page?
I’m not a programmer, but I do want to make sure I fully understand your question.
@Piper_Wilson Yes! I should have clarified, I’m referring to the landing page with my portrait, though I’m open to feedback on both pages (e.g. I probably need to increase font size for readability on mobile).
Hi Katelyn,
To address your question directly: this would be a CSS problem. That being said, I think the best solution for this would be to cut a new image that would only be used for mobile. Your CSS would look like this given your current code:
@media(max-width: 480px) { // 480px can be replaced with whatever value you want. This is just what I use for mobile.
body {
background-image: url("NEW_IMAGE_URL");
}
}
With that being said, I recommend you not put the background image on the body. Instead, put it as the background-image for a div that takes up the whole page instead.