Difficulty with layout of my wesite

I’m attempting to create the landing page for what will eventually be my portfolio website, but I’m running into some problems with the layout. I’m hoping someone can help me figure out what I’ve done wrong and how I can fix it.
I’ve set up my project so it can be viewed HERE on the Codecademy site for ease of viewing, but I’ve been using VSCode for everything prior to copying it to Codecademy.

I haven’t done much by way of decorating as I’m still trying to get the layout correct, but here the general way I want the layout to look:

I’m currently using CSS grid to attempt to set up the layout, but I’ve also tried inline-block and flex without success. For some reason the figure element always wants to take up too much room and shove everything out of place. Typically this results in the article and footer elements being at the far bottom of the page, but I’ve also had the failure of the figure element covering the entire top of the page and leaving the header element unseen.

I’ve been at this for several days now without success. I’ve tried numerous experiments to complete the layout, added background colors to the elements to better visualize the space they are taking up (currently commented out in the project), and tried different display settings and ways to justify/align content/items, but everything has ended in failure. I’m wondering if I’ve made some sort of newbie error that’s thrown everything off, but can’t find one.

I’m really unsure of what I’m missing or messing up on and would greatly appreciate some guidance/help.
Thanks in advance for the replies.

I think flexbox would be easier for this than grid. A single flexbox column going down the center of the page. The first element of the flexbox can be a horizontal row flexbox with your header and figure in inside it. Everything else will just fall in place automatically.

Thanks for replying.

I tried that. It results in the image being distorted and pushes the bottom elements down too far. I have no padding, margins or anything on the figure, so I can’t figure out why it keeps taking up so much space.

I added a background color of blue so you can see the space it’s taking up. It goes beyond the screen.

The other elements aren’t even on the page because of how far down the figure element pushes everything. I’ve tried resizing the figure element, but it just shrinks and distorts the image and figure caption without reaching a point where the image/caption is visible and the figure element fits.
I’m sure that somehow the image and figure are at the center of my problem, as that is the only element not doing what I expect, I just don’t know why or how to fix it.

Okay. This is a tricky one. I think it might be helpful to set min and max values for both height and width.

Also, when you specify the height and width of something as a percentage, the percentage refers to the immediate parent container. So the image is 60% of the width and height of the blue box. You may want to specify the dimensions of the img in pixels.

I had a few minutes to kill earlier so I pasted the code into a codepen file and fiddled with it. It seemed to work a lot better when setting the header and image’s pixels directly. https://codepen.io/djaknow/pen/NOgbjd

Thanks for working on the code and finding a better option. I tried your link but found that the image didn’t play well with the first element when changing the browser size. Essentially the image pushed the header out of the page so it couldn’t be seen.

After checking your link, I tried another approach that seems to be a working solution. It still isn’t as responsive as I’d like because the image shrinks too much when I change the browser size, but it’s the best option I’ve found so far.

.self-pic{
  max-width: 100%;
  object-fit: cover;

This finally let the image fully fill the figure element, then I was able to adjust the size of the figure element and add a top-margin to line it up properly with the header element.

I’m thinking I can use min-height and max-height on the figure element to improve the responsiveness when shrinking the browser size, but right now I’m honestly just thrilled that I was able to get the image to fill the figure element. After several days of experimenting, it feels like I’ve conquered a mountain :laughing:

Thanks again for helping.

1 Like