Mobile Formatting Nightmare

I’ve finished and turned in my first project, the Tribute landing page. But I only paid attention to if it was good in web mode. I ignored mobile and now it looks pretty bad on mobile, the image caption is larger than the image, and the text goes all the way to the edge of my screen. Any help is appreciated.

https://codepen.io/Smellbringer/pen/wvzKwKP

Hi!

I just finished this project so I will be able to help you. What you need is to create a responsive layout for the site. Add the following code:

@media screen and (max-width: 600px) {
    #image {
        width: 90%;
    }
    #title {
        font-size: 50px;
    }
}

The code above will apply CSS styling to the “#image” selector (this is just assuming that your image has an id of “image”) if the screen is 600px and below.

You can add additional styling to other selectors like what I did with the “#title” selector.

Hope it helps!