I would love to hear some suggestions and advice on my tribute page project. The goal was to practice images and text placement and responsive design. I’m generally satisfied with the result, altho I’m pretty sure there is a lot of room for improvement.
What I am NOT satisfied is the first box. I feel like the photo doesn’t exactly fit there, but I had no idea what else to put there, and with out it the entire section would be very… empty? Also I didn’t manage to keep the photo on the right side of the text on smaller screens (like in the lower sections) - when I open this pen on my smartphone, the photo is below the title and date. That’s obviously because of using responsive grid, however if I don’t use it, the image gets messed up. I suppose the reason for it is font-size - there is simply no space for text and image in one row on smaller screens.
Also what I just can’t do is to center the image on smaller devices. If you open the page on smartphone, the image floats to the left, for some bizzare reason. The only solution i found to this is setting image width to 100%, but that doesn’t look good on medium+ screens. Any ideas how to fix this?
looks good but responsive doesn’t look good - as I shrink my browser width, the pic (in the header) loses it’s aspect ratio, not good. My css is somewhat lacking I’m afraid. I thought responsive image was width 100% height auto, but that doesn’t fix it.
From a mobile viewpoint, the links at the bottom just look like normal text, no mouse over on mobile (just a thought, don’t actually have a mobile with me).
Eh, you are right. i just fired it up on xxxlarge screen - images height is also messed up. I think I know how to fix that tho. Not sure what to do with title box picture, but I’ll try to rewrite the whole thing tomorow.
I like it. I would change the wording of the link as I don’t like links which say “click here”.
Instead of You can see more of Beksiński’s photographs [here] <- link
[See more of Beksiński’s photographs] is how I would do it.
This is for accessibility reasons.
@JohnnyBizzel Thanks very much! You are right about the links wording. Still, I decided to just remove the links from middle sections since I have links section at the end.
I have rewritted the entire thing to make it more responsive - you can see it here (also updated the link in the first post). I used media queries to handle the photo in the first box and some other stuff. Still, if I open this pen on extra large screens (1700+ px wide) the images start to extend from their sections downwards. I tried to fix this by adding this:
div img { max-height: 300px;}
to the CSS for large screens but it didnt work.
I also tried to use object-fit: contained; for the divs that contained pictures, but it didnt work either. Anybody knows a solution to this?