Learning flex for Product Landing page project

HTML-CSS
1

I am having a problem trying to use flex on a form for the Product Landing page project. I want to put a button and email text field on top of a hero img and it’s not working, it should be the simplest thing but I can’t find the problem. When I enlarge the screen it also moves with it, how do I keep it in place?
Specific problems id areas are #hero-sub-title, #submit(join now btn) #email(the textbox of the form).
Thanks
Barbara

2

Here is the link to the project
https://codepen.io/barb1643/pen/MdEQav?editors=1100

3

Hi!

I am not entirely sure what you are trying to achieve, but I’ll share my 50 cents anyways :wink:
If I understand you correctly, you want to have a full screen header image with overlay elements. IMO there are 2 ways how to do this:

  1. Your solution with an image within a div, stretched to full size, position absolute and elements with position absolute. A solution that might work, but is tricky to implement - there are a lot of relative elements around that might not end up at the right position; especially on large or small devices. Furthermore, the image will scale on different devices not according to the viewport, but to the ratio of the image - therefore, having insufficient space on small devices. All fixable of course, but tricky.

  2. What I tend to do in this situation is to make the image a background-image of the div, like so:

    background-image: 'path/to/file.jpg';
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-color: white;
    display: flex;
    height: 100vh;
    margin: 0;

Just took this out of an old project of mine, so you will have to adopt it properly to your case. With this you have the advantage of having a full-screen background image while keeping all the positioning options of flexbox for the elements above.

I hope this was you where looking for!

Cheers.

4

ok thank you…I will give it a try as a background image. My other question is am I using flex correctly? Because it doesn’t seem to work on these elements at all.