Beta FCC Project: Landing Page - Problems

1

I’m not done fulfilling the requirements for the project but I’m running into some problems.

The first is when my project is 900px or lower you can see the video iframe doesn’t function as I thought I set it to. It’s supposed to fill 100% and it does but the video feed is jacked up and theres console errors I don’t know what is causing it.

The other issue I’m having is my flex column - the row with three paragraphs; At about 410px it doesn’t break up into single but just stays it’s same size while the view port get’s smaller.

Any help would be appreciated. Thanks

2

The video issue is because you #video-container is always 800px, even when your viewport width is less than 850px, because nothing changes the width of #video-container (I assume it’s meant to be 100%) inside the corresponding media query.

The problem with copypasta code is that you don’t think about what happens, and when it doesn’t happen you should break down the problem into smaller parts and find out what’s wrong. For example, in this case you should make a separate Pen and get a video embed working with media query first—it’s often distracting, if not difficult, to try to isolate an issue with a bunch of other things happening. You should try solving the flex issue by trying that.

1 Like
3

Great advice. I will work on that tomorrow.

4

I fixed the video issue once I looked over the code again about the #video-container not automatically scaling.

Thanks again for the assistance. I still have some odd error & the flex issue to resolve but the video issue was relatively easy to fix once you mentioned what the issue was.

5

how did you make that background of people with their hands in their air just the top half and when you scroll you see different things? I see that on a lot of pages and i dont know how to do that

6

It’s called a “parallax effect”.

https://www.w3schools.com/howto/howto_css_parallax.asp

Read thru that for more information.

7

sorry. i looked at your code over and over but could not figure out how you did it. In your pricing div, how did you make each point in the list have its own background colour?

8 
<div class="col">
                <ul class="price-box">
                    <li class="header">General</li>
                    <li class="emph"><strong>$10.00</strong></li>
                    <li>General Admission</li>
                    <li>No extra perks</li>
                    <li class="emph"><a href="#" class="button">Sign Up</a></li>
                </ul>
            </div>

Notice that most of those li tag’s have classes. I used those classes to give them specific color schemes. Check the CSS rules for each class to see it