Hello world,
I have just nearly finished the tribute page.
I need some feedback and help regarding the following error:
→ 1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size. ←
How can I fix this? Many thx 
Hello, welcome to the forums!
Your page is coming along nicely, you just have some issue with the tests.
Make sure to closely pay attention to the errors listed (click on the 9/10 tests passed)
Adding the proper display value for the #image will solve this error. However, this will result in another test to failing because the image will no longer be centered within the parent container.
If we highlight all of the objects on the page using:
* {border: 1px solid red}
figure {2px solid green;}
We can see the area the figure image container takes up:
Centering the image will pass all of the tests and should look like this:
You can center the image in multiple ways. The two methods I use are auto margins and flexbox.
To recap:
Then I can project review the design and provide other tips.
img element is not responsive
Hi michaelnicol,
Many thx for your time and feedback.
I managed to fix the error by adding “display: flex, justify-content: center, align-items: center” to #img-div .
Looking forward to more tips in order to learn 
You could also use on #image:
margin: 0 auto;
to center the image.
The first thing I would suggest is making the #main a different color then #content-wrap. I would suggest keeping the #content-wrap as white and making the #main a darker but still light color.
For example, I tried:
background-color: rgb(157, 168, 235);
on the body and
box-shadow: 2px 2px 5px black;
background-color: white;
on #content-wrap
This is what I got:
It makes everything pop out better with something as simple as a color change. Try different color schemes to see what you like.
Really love the colours. Looks much better than my version 
Actually, I tried to experiment around with some colours, but nothing looked good to me, so I decided to keep it simple. I will definitely play around with different colours and box-shadow and see how it looks.
You could also try a light gray background-color: rgb(223, 223, 230); for the body. It stands out less then a primary color.
If this doesn’t work, I have another idea for using a background image.
@Allen_M, as has been pointed out be sure and read the entire failing message, not just the first line. The rest of the failing message usually tells what the test was looking for and what you can do to correct the issue.
For feedback some things to revisit;
hey,
@Roma
thank you for your feedback, have changed “here” to avoid uninformative link phrases 
Hey,
@michaelnicol ,
changed color of #content-wrap and added a box-shadow. What do you think?
“wikipedia entry” is not an accessible link. Please be sure and read the links to understand accessibility.
Make your page responsive. Remember, the R in RWD stands for Responsive
It’s good, but what you want is contrast.
The idea of making different colors for your smaller container then your background is to focus the users attention to the content. If you have white on white, the user’s attention is not focused.
I would say its a decent color scheme, but still a little bright overall (lack of contrast between background and foreground)
@Roma
Thank you for your feedback. I have made some changes. Can u have a look and let me know if it’s correct .
hey @michaelnicol ,
i have made some changes regarding design and background. Please have look.
What do you think?
Hi,
page looks good!
You improved it a lot
@seekinfox thank you. 
Your page looks good @Allen_M. Nice job cleaning things up.
I like the idea of the highlighted text, however, I wouldn’t say it works with the color scheme. The idea of boxed text works best on a background image or color that spans the entire container.
When you are using a box shadowing, it is supposed to divide the element from the rest of the page. This includes using a different background color to separate it.
It looks nice, but I would say remove the box shadow on the header if you go with the boxed text look.
hi I realized you have disabled the scrollbar and that users cant move up and down in the page and some of your content will be hidden from the eyes in desktop so
remove this part of code : ::-webkit-scrollbar { display: none; }
since that is for customizing the scrollbar and is now hidding scrollbar(if you dont look for customization)
and add this code to your body tag : overflow-x:hidden; and that should do the trick.
by the way I like the design goodluck.
Hamed
Be careful using this.
overflow-x: hidden; will completely hide anything that extends outside its container element horizontally. It’s recommended to not do this, and refactor your CSS to be more responsive - otherwise it is possible for your site to appear to be missing content.
