Portfolio Project: 2 problems

Problem #1:

## The height of the welcome section should be equal to the height of the viewport.

I have embedded a <meta> tag in the <header> section as well as attempted to define the height and width of the welcome section to the size of standard viewport but I am unable to pass the last test.

Problem #2:

I used <Iframe> to act as thumbnail image link but I would rather just have an actual <img>of the site I want to link to. How can I make a thumbnail image for the links I want in the project section and not these window portals created by the iframe tag?

Any help would be great!!! thanks in advance…

Hi, @SlimTheCoder!!
I have seen you portfolio pages.

Problem 1

The #welcome-section has a border attribute. Remember, border adds to width thats the reason you can past the #2 design test.
If you want to give a border without adding height, you can tray use outline instead border.

By the way, i can’t understand you grid system, when I remove the border, the test pass, but i see a white space before de section.

Problem 2

iframe is not a good idea.
For thumbnails I take a screenshot of my page or, in the pen settings you can download or link a thumbnail of your pen.

I hope this helps you.

Thank you so much comrade, they change of border: to outline: did exactly what I needed.

I see the gap you are referring to and when I change the margin-top: style command on welcome-header it disappears but so does my name in the welcome section. I will keep playing with it and see how to re-position the header in the middle of the welcome section without moving the entire section down like that.

Once you take the screen shot of your page how do you link the URL of that photo to the code to be displayed on the page? That’s the part I’m a bit lost on. I know it has to be uploaded to a public domain somewhere.

I use https://cloudinary.com to upload images, I have a free acount.

1 Like

I found a way to upload screen shots using GitHub since I created a GitHub account for these projects. But now all the damn screenshots are huge and pouring out the area in the grid I made. lol

One thing then another but thanks for everything.

In this challenge explains how to mane an image responsive.
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive

Thanks I read some more and found what was going on. Still got other fixes but the page does what it is supposed to do.

1 Like