Tribute Page: trouble passing the responsive image size

1

I got a bit carried away trying to play with the design on this one, and although it looks to me like the image is resizing just fine, the test doesn’t seem to like the way I’ve implemented it. Is there anything I can tweak to get it through in its current form? Is there anything wrong with the way I’ve done it? Link is below. Thanks!

2

Instead of applying the same properties on both the container of the image and the image itself, try applying necessary properties on #image separately to make it responsive. You have to make the image responsive, not the container.

1 Like
3

Thanks for replying - just this second I’ve got it to pass (slightly at the expense of the design). I had tried what you suggested but I think the test intended me to follow the example project more closely than I did - it ultimately needed it to be display: block and height: auto to pass rather than flexbox.

I think the reason I ended up applying properties to #image and the container simultaneously was because I’d not read the requirements carefully enough before making the page, and doing it that way was a lazy workaround to get it working while still ticking some of the FCC boxes without having to redesign anything. The code I made before putting it into codepen was cleaner, and the learning is the most important thing I guess!

4

Very nice project. I like literature too. Then I decided to make a new version by forking your project.

I added comments so, if you like, you can read a few humble suggestions. I write a summary of the main adjustments below:

A few general advices

  1. Style the elements in the same order that they go in the HTML file. First body, img-div, then tribute info, etc etc.
  2. Start from the mobile phone version, then you write modifications for tablets and laptops at the very least
  3. Standard way to start css code is resetting of a few properties. It saves some typing later.
1 Like
5

Thanks so much for this! I’ll have a good look at what you’ve done and wrote tomorrow, when I’m not about to fall asleep. Since I posted this I did the survey form assignment which I’m much happier with, your comment about mobile versions is making me think I could tweak it a little more tomorrow.

6

You’re welcome, and good luck for the next challenges, you’re doing well :slight_smile: