First Project with FCC! Feedback on my MLK Tribute Page Much Appreciated! Also some Mobile Help :|

[LearntoCodeQuickly]

My first FCC project is up at:

https://codepen.io/learntocodequickly/pen/yLaWPKg

I’ve done Wordpress stuff for over a decade, but this is the first time I’ve ever written a line of code. Can’t say enough good stuff about FCC as a resource!

My project appears to work well on the Code Pen browser when I re-size my window -i.e. my mobile breaks appear to be working - but when I open the link on my personal mobile phone all of the background images are uber-zoomed. I’ve googled Stack Overflow and tried a couple of different things, with no luck.

Main thing I’m wondering is if it’s a problem with my code, or a glitch with Code Pen, would anyone on here know? I’m not going to spend time trying to fix it if it’s a Code Pen issue, but if it’s a real problem, that’s something I need to understand what I’ve done wrong with.

Also, I’ve got super thick skin. Please be as blunt and as harsh as you’d like, I welcome it! Nitpick away. The only thing that will get to me is if you substitute raisins into my cookies instead of chocolate chips… No coming back from that.

Thanks!
Nate

[jwilkins.oboe]

Hi @LearntoCodeQuickly!

I think your page looks awesome.

As for the image problem with mobile devices, I ran into the same issue with my survey page.

I ended up resolving the issue using a media query for mobile that removed the image and replaced it with colored background.

Maybe one someone else on the forum will have a better solution.

[Barayturk]

The code looks perfectly fine to me! Nice job!

[jwilkins.oboe]

I just remember that I saw a comment in the FCC Survey form concerning background images for mobile. So you could try that approach.
https://codepen.io/freeCodeCamp/pen/VPaoNP

[LearntoCodeQuickly]

Thanks! I think my biggest problem is that I’m applying the bg images to individual divs, rather than the body page, that’s where the crux of the problem is, I did see a Stack Overflow post that addressed the body image as well. I might toss this problem up on stack and see.

Much appreciate the feedback and link!

[Roma]

Your page looks good @LearntoCodeQuickly. Some things to revisit;

• Start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.

One thing that will help is to not use fixed dimensions on elements. Use max-width/height and relative units like %, em, rem and vw to keep everything responsive.

There’s quite a bit of redundancy in your stylesheet. Remember to use the DRY (Don’t Repeat Yourself) principle.
For the most part the selectors for h1 through h6 and .speech are basically the same. Some differences in padding and font sizes. You can have one selector for all of them and just a couple of lines for the differences in the selectors that have different declarations.
Same with the media queries. Lots of duplication.
There are parts of your media queries where you literally overwrite the class that was defined earlier.

Look at lines 214 and 223 for example. Both are the same media query (although on line 222 you declared it again but here,
line 214

.fifth {
  background-image: url(https://learntocodequickly.com/wp-content/uploads/2021/01/mlk-2-1.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #333333;  
}

and line 223

.fifth {
  background-image: url(https://learntocodequickly.com/wp-content/uploads/2021/01/mlk-2-3.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  width: 100%;
  background-color: #333333;  
}

[LearntoCodeQuickly]

Fantastic, thanks for this, I’m going to work on cleaning this up.

[LearntoCodeQuickly]

Thanks to everyone who provided feedback previously, I’ve re-done my MLK tribute page with the feedback incorporated, including:

• using REM instead of PX where I thought it was practicable for responsiveness.
• removing all caps and using text-transform
• removing (lots of) redundancy in headings.
• changing breaks for BG images.

I do have two remaining questions (alongside any other feedback offered):

1. It says I’m not passing the test for the image being responsive. Is this a test glitch? I see the image as being responsive.
2. I have 2 @medias )187 and 203 that I can’t seem to move up to the top and slot in neatly with my other medias, it doesn’t let it wrap if I try to move those media breaks up to the top. Can’t figure this one out.

Any help appreciated!

https://codepen.io/learntocodequickly/pen/yLaWPKg

[sitek94]

Hi @LearntoCodeQuickly,

Really cool website

@LearntoCodeQuickly

It says I’m not passing the test for the image being responsive. Is this a test glitch? I see the image as being responsive.

You’re not passing this test because it wants you to use max-width property:

Try using the “max-width” style property : expected ‘none’ to not equal ‘none’
AssertionError: Try using the “max-width” style property : expected ‘none’ to not equal ‘none’

Other than that, I don’t like when I open the website and the audio plays automatically. Especially when it starts with some background noise. I don’t know - maybe it’s just me

[LearntoCodeQuickly]

Thanks sitek94,

Yeah I struggle with autoplay, it’s a double-edged sword for sure. I think this is the type of site where it makes sense and it’s okay, but I understand it’s a nuisance for a lot of people. I turned it off and clipped out the first second of static in the audio clip.

Fixed the max-width thing, thanks, all good now!

Edit: one thing to mention, I learned after HOURS of struggle that IOS Safari and Mobile Chrome do NOT support fixed backgrounds in divs.

Maybe there’s a workaround, but the baseline is that it doesn’t work.

[Roma]

• Run your HTML code through the W3C validator.
  • There are HTML coding errors you should be aware of and address.
  • Since copy/paste from codepen you can ignore the first warning and first two errors.
• Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
  • The one for CSS is good. Use it and address the issue(s).
  • (The one for HTML misses things which is why I recommend W3C)