Tribute page, I would like some feedback please

Code Feedback
1

Hi everyone i just finished the Web responsive design certification and completed the first project, the tribute page i would like some feedback and maybe some new ideas !
I’m going to start the survey page now.

Tribute page

thank you everyone this community is great.

2

  1. Add a thicker border around your main image at the top. It tends to blend into the background a little bit.

  2. It isn’t responsive. Use media Query’s to change the width of your title and tribute-info to 95 - 100% on smaller screens. I would suggest combing them all into one div with the image inside and everything.

image
image1280×984 519 KB

  1. Everything seems to just scale which will make it harder to read on smaller screens. Check out flexbox, media query’s in my tools below.

Notes

Please hit the reply button or I do not get notified.

Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites

1 Like
3

hello thank you for your time and feedback i don’t understand your second point i thought this part was doing the job:

@media only screen and (max-width: 480px) {
body{
background-attachment: scroll;
}
#main{
font-size: 4vw;
}
h1 {
font-size: 10vw;
}
h2{
font-size: 4vw;
}
ul {
padding: 15px;
}

It doesnt look bad on my phone.

Im reading about the flexbox right now thank you for the link !

4

Overall I think it looks good. I do agree with one of the other reviewers that the border around the heading section could stand to be a little thicker. But seems to be fitting tribute for the great Stan Lee.

5

Please take a look at my product page and let me know what you think.

6

I would not suggest using grid at all. With flexbox you can easily, independently, center items along with many other features.

Rebuild the structure of the page without using a grid.

Their is also something wrong on line 16 HTML.

Your also missing a closing tag for your media query

@media only screen and (max-width: 480px) { 
  #main {
    width: 95%;
 }
}

This is a example of what i am talking about. If you use a flexable structure like flexbox you can easily change the general width of things on interval screen sizes

1 Like
7

ok i will give it a go but i though grid was like the future of css so i tried to use them to get familiar with it.

8

i mean i know this kind of page isnt the best place to use grid and i don’t really gain anything execpt training for using grid here

9

CSS grid is another hyped up framework that will die out soon.

The reason is because its simply over complicated compared to things like flexbox. It is also not very necessary no matter how big your webpage is. CSS grid is like hard coding your webpage, Flexbox is like making a flexible framework using boxes.

–> https://css-tricks.com/snippets/css/complete-guide-grid/

I debate someone about it here: Build fully responsive site

1 Like
10

thanks michael that is very helpfull

1 Like