Having trouble with my new project

Hi, everyone. the

element I added does not respond to the styling in CSS, also I dont know how to resize the image to its parent. Can you help me with that, thanks.
here is my project: https://codepen.io/LangXIE/pen/oQBGdM

when you are on the css file you should not use html tag like <style></style> or <link>. Your coding is awfull, i can barely understand it. Use spaces and new lines when required dont use ; after a set of rules. Here you can see what i mean:

<style>
a: hover {color: pink; }
#img-div {
  position: relative; }
#image {
 max-width: 100%; 
 display: block;  height: auto
 position: absolute;
 margin: auto;
  border-radius: 50%; 
  width: 300px;
  height: 400px;
  padding: 20px, 10px, 20px, 10px; 
}; 

the link of the image is not working if i put it directly on the navegator, probably you need to be loged on dropbox to see it. Here a pen whit some changes my pen. You are also using inline html style, they will took precedence over the css file styles.

if u want the img to resize to the parent use % instead of px so width: 100%; will use all the width of the parent and 50% half.

1 Like

Did you mean that there shouldn’t be ; behind “max-width:----” "display:-----’ “border-radius:-----” etc.?

Also, can your specify which part of my codes that confused you the most? I used inline styles because I thought that the CSS wasn’t working.

no, there should not be ; after the } like here

#image {
 max-width: 100%; 
 display: block;  height: auto
 position: absolute;
 margin: auto;
  border-radius: 50%; 
  width: 300px;
  height: 400px;
  padding: 20px, 10px, 20px, 10px; 
};

And the confusing part is the format of your code like here

a: hover {color: pink; }
#img-div {
  position: relative; }
#image {
 max-width: 100%; 
 display: block;  height: auto
 position: absolute;

It is dificult to see what is going on, and actually prone to errors like on the 6 line where you miss a ; at the end of the height (the rest of the css will not be diplayed well). So better something like this

a: hover {
  color: pink; 
}

#img-div {
  position: relative; 
}
#image {
 max-width: 100%; 
 display: block;  
 height: auto;
 position: absolute;
...

here you can read some articles on why to format your code and guidelines to do it:

1 Like

Don’t fret. Ollie will have a proper Tribute Page. You’re off to a good start - 7 out of 10 tests are passing already.
But…

Coding Style
@nick2o is right. Your code is a mess.

In codepen there are some tools in the dropdown menu on the bar labelled CSS that can help you (if you remove those style tags first) . Tidy CSS will indent your css properly, etc and Analyze CSS will highlight any (well ok, some) errors. Neither are perfect but both are surely worth using.

The HTML editor and the Javascript editor in codepen have similar tools too.

That said, your first line of defense is a neat and consistent coding style from the start. It will be easier for you (or anyone helping you) to spot errors and your intent will be clearer.

You do actually have some syntax errors in your CSS but that is not easy to spot with your coding style. CSS is really rugged. If it can’t understand something it doesn’t crash your page or send out an error message it just ignores the parts that don’t make sense and keeps going. That makes for a robust web page but also makes it hard to find errors.

Codepen is a little different and takes some getting used to. You don’t need to wrap your CSS in style tags or your Javascript in script tags when using CodePen. Copy or key your code into the proper place in the editor and CodePen takes care of the rest.

This line, and those style tags, is why your styles won’t apply. That line belongs in HTML

<link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet" type="text/css">

Syntax
You need to be careful with case and syntax too. monoton, Monoton and ‘Monoton’ are three different things. Only one of them will work. Also watch those details like semicolons etc - missing one has consequences that are sometimes not apparent at first.

Ask clear questions about one thing

Which project? Which element? Which style not applying? Are some tests not passing? Can you link to the requirements page?

Trying a whole bunch of fixes on a whole bunch of errors and then asking for help is not going to end well. You have linked your fonts in more than one place and then applied them as style in more than one place. Any or all of them could be your error. There is also something not working with your image link so resizing help is a bit premature. (Possibly you can see that image on your computer logged in as yourself? For some reason I can’t see it).

Error messages
Read the response from the tests carefully. Some of the error messages are very specific about what is preventing you from passing. There are good clues about how to fix your image issues.

Method
Methodically add complexity to your project. Once something is not working as expected backtrack to a place where everything was working and try something else. If you have to ask for help show the one thing you last tried that is still not working.

Normally for this project I would suggest that your first satisfy the requirements one at a time. On completing that stage the page won’t look so great (like the example page - mediocre is about the nicest thing I can say about it). Then take the time to add the little details, one at a time, that will make your page really great. I think you’ve already passed the point of minimally passing in some places but you might consider commenting out some of your styling until you get the last few requirements completed. Add them back later to see if they create errors.

I see some errors in you page. Just by commenting out a few lines and fixing a few syntax errors I could get all 10 requirements to pass (oddly, I still don’t see a picture of Ollie but if it was there I’m sure it would be responsive and centered).

Good luck. I look forward to seeing your completed Ollie tribute.

Thank you so much for all of the advice.

1 Like