Help me to improve my Landing Page

1

Hello everyone. I already finish my Landing Page but saw some problem. Can someone help me with suggestion to fix it. What did I miss?

Here’s my problem:

  • On left side of the screen, you’ll notice it doesn’t go full screen. There’s a tiny gap around 2-5px maybe.

  • On Footer, I can’t make it stick to the bottom. I tried to use position: fixed; but it always following whenever I scroll.

  • Can’t make video work, I use youtube as a link.

  • Any suggestion also welcome :smiley:

You can check my project below or by clicking the link here

1 Like
2

Hi, I had the same problem with my video, you have to go to youtube and under the video click share, then embed which will give you this:

<iframe width="560" height="315" src="".....

this you can use in your html file

1 Like
3

On left side of the screen, you’ll notice it doesn’t go full screen. There’s a tiny gap around 2-5px maybe.

  • Add margin:0; to your body declaration in your CSS.

On Footer, I can’t make it stick to the bottom. I tried to use position: fixed; but it always following whenever I scroll.

  • position: fixed; coupled with bottom:0; will work. Note: you will also need to add width:100%; and possibly update the margins around your flex element so the page renders correctly.

Can’t make video work, I use youtube as a link.

  • How come you didn’t copy and adjust the code YouTube usually gives you when you click on the share button? It looks something like…
    <iframe width="560" height="315" src="https://www.youtube.com/embed/M7g7Pfx6zjg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Any suggestion also welcome

  • I would add a couple of media queries to update the sizing of elements, particularly the flexbox when the browser size is smaller than full size on a desktop (if you want).
  • You could potentially add some CSS to the hover state on the submit button so it’s a little interactive an you w
1 Like
4

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}

1 Like
5

I can’t believe it everythings work! Thank you guys! Oh and I’ll follow your advice @JohnJohn