Tribute page to Charles M Schulz - need feedback please

I’m happy with the way things look on the computer. The image sizing on mobile is bothering me… I need to play around with media queries or something to fix that.

1 Like

Amazing design!!! All in all it’s very nice to look at! You can fix the image sizing on mobile, (I believe you don’t need media queries with that) by letting your div-img control the width of your img instead of controlling the image itself.
So it’s like this:

  • at your div-img put a max-width. So it won’t get too large on 4k and center it horizontally
  • and increase the max-width of your #image

if you want to take a step further these are my suggestions:

  1. Using <main id="main"></main> instead of div
  2. Putting h1 inside a <header></header> tag

This is just semantics, for good markup practices, check this resource for more info! https://marksheet.io/html-semantics.html

Happy Coding!!

Hello Kaylee,
Just checked you work.

The theme and colour scheme is great if you ask me.

The one major issue I can point out is about the layout. It’s not responsive. even in tablet it’s not good.
You have left and right panels, and please mind the notable gap between them. In mobile you may use this space.
please check:


You see items go over border, notable space between left and right section.

I suggest you use media queries and let the left, right and center image go like flow layout(first image, next left, and next right). check:


added some padding, placed the image before the left panel, gives more width to image, added padding to #tribute-info, now I think it looks better. (no media query)

One note about the sizing images. I see you set image width as 40% and also set the height as 20%. This is not a good practice, please note setting both width and height of an image would break its aspect ratio. This is better you set either height or width, and let the other one as auto. example:

.my_image{
width:100%;
height:auto;
max-width:10in;
}

Also see you set font-size with pixel unit, like font-size:20px for body. please don’t! if you see any element has not appreciated font-size(e.g. inputs) first try 1em. if you think it’s larg, user smaller like 0.9em, and greater to enlarge it. Use em for font-size.

Please rework the layout, theme and design is great enough. Mind the space between border and content, by default it’s zero for most elements.

p.s. I like Charlie Brown so much, but Spongebob, spongebob is life

Keep going on great work, happy coding.

1 Like

This is very creative! Other than the image sizing(you are already working on that), the layout and font is great and really complements the person who you are paying tribute to.