Conditional CSS for mobile design?

portfolio
usability

#1

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


#2

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.


#3

@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).


#4

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.


#5

Thank you for your answer @ben_ng!