Tribute Page: Why is there a blank (grey) space to the right when the viewing window is large enough?

This is my Tribute Page.

Also if convenient, give your suggestions as to how I can improve it.

Someone suggested the picture look stretched out on large screen. I think this is due to the fix height. But I don’t know how to make both height and width change in proportion.

If you remove the margins from the container element, it seems to fix the issue.

In my opinion, the page would look better if the heading and the images were centered. Rather than using a list to align things, I would recommend using an h1 tag for your header and p tags for the paragraphs. On my screen, the images look very stretched out, so decreasing the size (50% would look good) and centering them made the page look much better.

I tried eliminating the margin under .container class, instead of margin: 0. But then, there will be blank spaces on both sides. (I want to know how I can stretch the picture across the entire screen, so as to form a border).

I don’t know how to make the height and width of the picture stretch in proportion.

When working with pictures I use Preview’s (on macOS) Inspector feature determine what the proportions are of the original photo. Knowing this lets me preserve the ratio of width to height in the CSS block. Something else I’ve found when working with CSS is to keep the page responsive I try to express width and height as percentages of their enclosing block rather than relying on absolute measurements like pixels. Hope this helps.

What I want to do is to always make width=100% so as to fill the entire width of the reader’s screen. But I don’ want to have the height fixed so when the reader’s screen is too wide, the image looks stretched. Can I make width: 2*height or something like that to preserve proportion?

If you specify the width as a percentage rather than a fixed value, the height will size proportionally. I’m not sure if this is what you are looking for, but I tried playing around with the code, and I made the image larger and used negative margins to get rid of the gray space. Here is what I used:
``.image-fill {
width: 125%;
margin-left: -10%;
}

I got the effect I needed. Thank you.

1 Like