Tribute page review/ questions

https://codepen.io/MochaJoe/pen/GadrzR

Please review.

Questions,
How do i resize img/ text for smaller displays
Is my code messy?

About 2 months self learning in my free time. Thanks for the feedback :slight_smile:

-mocha

For starters, don’t define your text size in px, use em or rem to make them adjust to the screen resolution and user preferences automatically.
To make your page adjust for smaller displays you need to add media queries:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

For instance, you might add:

@media (max-width: 600px){
  #main{ margin: auto;}
  #title {margin: auto; font-size: 3rem;}
  .img1{width: 100%; height:auto;}
  #tribute-image{margin: 0;}
  .center{margin:0;}
}

Try it and see what happens when the screen gets under 600px.
As for your code being messy, you’ve got a lot of nested divs with different classes that could be simplified. Look into learning Flexbox and you’ll find aligning things a lot easier.

Full-time web developer here. I use font-size in px all the time. Nothing wrong with it.

If you’re going with media queries the syntax I go with is:

@media screen and (min-width: xxxpx){
}

I also create a non-media rule for each media query.
So like with the suggestion above:

#main {
    margin: whatever for mobile;
}
@media screen and (min-width: 728px){
   #main {
      margin:  whatever for tablet and bigger;
   }
}

And do that for each one.

Sure… it’s more verbose., but makes it scalable. And more importantly easier to modify / delete old rules in future.

This allows to easily delete or add more rules to each selector in future. You also want a default rule for mobile and queries cover larger sizes. Always design mobile first!

1 Like

In addition to my post above it’s a small detail,. but i touch my two selectors together that are grouped.

The pair above i dont add an extra line break between,. but additional rules I do.

I also cover only these ranges: 320px, 728px 1366px. Mobile tablet desktop. (320 being for the iphone 4 the smallest).

Oooh and one more final note… avoid IDs if you can with CSS. They’re a pain to work with. Small applications are not a big deal. But once you get to understand how CSS precedence works., you’ll know exactly what I mean.

My suggestions are simply suggestions. Not rules,. just things I’ve learned along the way to make programming easier for myself and those reading my code.

added some media in css and i think fixed it up as best as i could figure out,. img2 breaks on phones any clue why ?https://codepen.io/MochaJoe/full/GadrzR

anyone know why? this is happening?

Just a couple of things I noticed.
codepen provides you with validators for HTML, CSS and JS. Click on the arrow in the upper right and then click on the respective ‘Analyze’ link.

  • You have a missing equal sign in HTML here
    <div id "tribute-info">
    when you correct this you’ll have another minor problem because you’ll be using the same id more than once so you should correct that too.
  • text-color: is not a valid CSS property

oh man i really broke it :open_mouth: thanks

for some reason the tribute page stories require ID’s rather than classes. That’s why there are ID’s galore in the project.

That’s ok., then add both but only reference the class,. or the name attribute.

I personally like the name attribute., but both are still better than using ID in CSS.

1 Like

Thank you for the feedback, I believe I forgot to save my work :disappointed_relieved: I’ll be fixing this up once I get some free time.