Help with Product Landing Page---

1

Hi everyone,

I was hoping someone could help me with the following CSS. Please note I understand my code isn’t written perfectly and I have improvements to make over time. It’s also not complete.

  1. When the page is full size the height of the video is too small and can’t figure out a way to make it higher. I tried to change the iframe height inside the media query (as you can see in the following codepen) but it’s not working. It could just be my code wasn’t written correctly but if someone help me out I would appreciate it.

Thanks!

2

Something is going wrong with you’re containers but I’ll let you figure that out :slight_smile:

remove the iframe, since I assume that is for testing

    iframe{
        width:1150px;
        height:800px;
    }

next; try

    #video{
        max-width:100%;
        max-height: 100%;
    }

Not sure what’s happening the grey background around the video when screensize gets smaller

3

Your div container(flex-row) is too small, increase the height

div.flex-row{
width: 500px;
height: 500px;
margin: 25px auto;
}

Remove opacity as this is a video

div.flex-row{
border:solid black 3px;
background-color: white;
width: 80%;
margin:auto;
margin-top: 25px;
padding:2px;
border-radius: 10px;
}

change your video height auto to 100 % as we have increase the height of the div

#video{
max-width:100%;
height: 100%;
}

4

Neither of those fixed it for some reason :. Unless any of you have an idea why I think I have a way to get around it. I’ll just pay more attention with design next time. Maybe if someone can send me to the link of the edited codepen?

5

this is what i see after setting max-height to 100%. But it breaks the container when screen is sized down.

image
image1897×829 374 KB

6

Ya… My plan didn’t work either. Too bad. If anyone has an actual codepen link it might be easier but other than that I have no idea what’s making the video stay narrow. It has to be some kind of container that’s keeping it narrow but i looked and couldn’t find it… darn.

7

Hey guys! Figured it out. Thanks for your help!