I’m working on my tribute page. It passes all of the tests, but I’m unhappy because I can’t seem to get the CSS to work how I want it to. I want my image to be smaller on larger screens, but then I want it to reach from one side of the screen to the other on smaller phone screens. I’ve googled and tinkered and cannot figure out what I’m doing wrong. Could someone take a look at it for me? Thanks
Well, you’ve got the max-width on the img set to 50%, so it will always be at most 50% as wide as the parent figure element. Thus, on narrow screens it is going to be very small. So that would be the first thing to get rid of. Actually, you’ll probably just want to change it from a percentage to an actual value (e.g. 600px). Then you’ll want to add a width property to it that makes it responsive (e.g. width: 100%). And if you really want it to stretch all the way across the page then you’ll need to get rid of the side padding/margin on the figure element.
Doing all of the above should get you what you want. Then as you widen the browser the image will widen as well until it reaches the max-width, at which point it will remain centered on the page.