Can you please give feedback on my Tribute page

Code Feedback
1

Hi Folks,

I would very much appreciate any feedback on my tribute page.
Here is the link:

Thanks in advance.

Ronan

2

Hi, your project look’s good but add some padding in the tribute- description paragraph to make it more beautiful
nice work

3

Thanks for the feedback.

I have padding:1em .5em .5em .5em; applied to the tribute-info. Do you mean I should increase the values?

4

Hi! looks cool. I love the photo. Nice use of transform. I would maybe make all the fonts
sizes bigger and make the youtube video a little smaller to not take up the whole bottom
part of the page. Also, is bootstrap being used? I can see the display block in your code
but don’t see where it is being imported. Is that a universal feature now? All in all looks good!

5

hello Ronan,
first, i don’t know that you have padding in tribute info but if you have so please increase the padding value to

  padding:1em 2em 1em 2em;

and second , please decrease the video size and change the code to

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 50%;
  margin-left: 30%;
}
@media(max-width: 500px){
  .videoWrapper iframe {
	width: 100%;
	height: 100%;
    margin: 0;
}
}

you have typo in line no 5 write font instead of text
happy coding!

6

Thanks, I have increased the paragraph font slightly and ,yeah, it does look better. I have previously tried to get the video smaller using iframe and eventually gave up after pulling my hair out for days ( any help there appreciated). No bootstrap, I used block to help position.

7

Thanks, I tried your suggestion for the videoWrapper but it shifts the iframe to the top of the page and hides the img.

8

Okay, it works for me so i suggest you to increase the padding so it looks professional.
Cos simple things look great if they have proper margins and paddings, otherwise do what you like. :fu:

9

Ok thanks. I do appreciate the feedback. I’ll keep tinkering until I get it.

10

I would suggest making the width of the #tribute-info smaller, example:

image
image1920×1040 807 KB

  • Box shadow to add depth
  • width: 75%; to make it smaller
  • margin: 0 auto; to center it

You can use media query’s on smaller screens to put it back to 100%. You keep that image background aspect and the user has to look around (left to right) less to read it.

I would also suggest adding a margin to the top of your video.

Helpful links:

11

Thanks for that. Certainly looks better. I have to add a media query for the video for smaller screens and I’m messing with adding a quote at the bottom of the page. I’m hoping to animate it but noticed something very annoying: the background image displays perfectly in chromium but in Firefox it looks like it begins a “repeat” just below the video. In QupZilla it it begins a “repeat” below the quote div… what a pain.

12

yeah animation in html/css is annoying because of different browsers and stuff. Just don’t worry about animations, however ask for help if you really want to.

–>https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/create-a-media-query

try max-width: 600px;

Nice job :slight_smile: