Help with Product Landing Page Project - Splash Screen

I have my splash screen (first section with the video background) to look how I want it to, but when I resize the screen, there is some amount of whitespace between the header and video background and between the video background and the section below it. It wasn’t like that until I got my splash screen to look like how I want it to, but not I don’t remember the main thing that I changed within the CSS. I would appreciate if ya’ll could help me figure out this small problem that’s going over my head.

I want my splash screen to look like this: https://magic.wizards.com/en/products/core-2019

Link to CodePen: https://codepen.io/chataolauj/pen/QzJRLr?editors=1100

You can add object-fit: cover; to the video element.

You have an overflow because of the fixed width on the grid-template-columns. You can constrain the size of the content using max-width, but it’s better to not constrain the grid itself.

grid-template-columns: 500px auto;

Also, you don’t want 100% height on images, it might not look too bad right now, but that is because of the overflow. If you remove the overflow you can see the problem. Just add grid-template-columns: auto auto; to all 3 of the section child containers (about-container, tabletop-container, digital-container), it will remove the overflow and you can see the problem with the images.

1 Like

To fix your issue, set header’s position to sticky

Then remove div empty space.

Thanks for the reply. I saw the object-fit property shown on the original MTG website, but it had “contain” as the property value, which didn’t work for what I had.

How should I set the height and width of the pictures? I’ve tried auto, but then they’re not the same length as the content on the left.

An image has an intrinsic dimension consisting of a width and a height and an aspect ratio defined by the two dimensions. You can constrain its size using max-width, but it should not be given height as that should be sized in relation to its width. Inevitably the text and the image will not fit side-by-side and you need to change the layout, most likely stacking them instead.

You should switch to using classes instead of ids, that way you can keep your CSS DRY. Right now you are repeating a lot of CSS that does not need to be repeated. Each of the three sections is using the same CSS. You can also make the media queries much simpler by doing so. If you need something to identify the sections in the HTML use comments.

I forked your project and made the changes, I kept your old CSS but commented it out just so you can compare. Just let me know when I should delete the fork and I will.

Yeah, you’re probably right about stacking the content and pictures instead. My only issue with that is that 50px of each section gets hidden under the header when the anchor link for that section gets clicked on. So, if you re-size the CodePen that you forked to the point where the items are stacking, and press one of the anchor links, then you’ll notice that the title is sitting under the header. Would be great if you could help me resolve that. That has been the only issue that I haven’t been able to find a solution to.

EDIT: You took out the ids from the HTML, so the navigation doesn’t work anymore. You would have to put the id back into each corresponding element to make the navigation work again.

Make sure you are not viewing the page with Codepens code boxes on top, look at the page in full page view (use the “Change View” button). Even then I would still suggest doing the responsive testing locally and not on Codepen. I added a media query with some top padding on small screen sizes. I also added back the id for the anchor navigation, I didn’t actually see they were hooked up, my bad.

I tried everything local before I pasted it in CodePen; CodePen is just there so that I can show ya’ll. In whatever viewport size, the top of each section is hidden underneath when the anchor link(s) are clicked on. I originally put a blank div right right after the header in the html to offset the sections from the header, but it only offset on initial load. I actually had a post about the sections being hidden under the header, but didn’t get much help.