Yuri Gargarin Tribute Page - Seeking Feedback

Code Feedback
1

Just started learning coding today. I tried my best to reverse-engineer most of the format for this project from the example without looking at the code without making too big of changes. It’s kinda basic I guess:

Anything I could do to improve this?

2

Shrink your browser width to about 1/3 of the size of the screen and you will see the photo does not scale down as the container gets smaller. You can use a percentage for the width property of the image instead of a fixed 1000px.

I tried the following and it scaled better:

.main-image {
  width: 65%; /* this is the change you need to make */
  border-color: #222;
  border-width: 10px;
  border-style: solid;
  align: center;
}

Also, with the browser width 1/3 of the size, the bottom gets jumbled. I will leave you to figure that one out.

image
image757×654 251 KB

1 Like
3

Thanks a lot for the advice! :slight_smile:

I’ve switched most of the sections into a row/column structure, and it seems to keep the alignment on all screen sizes as far as I can see now.

I set the width of the main picture back to 100% within the white box, as I didn’t like so much white space aesthetically, but by aligning the box itself to the center, it seems to still work at all resolutions.

The only slight issue I have now is that I want to align the final text (with the link) to the bottom of the screen (at all resolutions) and can’t seem to manage to do that.

Anyhow, thanks a lot for your help!

4