How do I create the Video Grid, Trending Section, and Nav extend all the way to the top of the page?

We’d need to see your page’s HTML script and some more information about what you’re trying to accomplish.

The switches will be too large and stretched, so it doesn’t really seem practical from your screenshot, which shows how far the nav can go.

Thank you for your response. I’m attempting to accomplish this.

I’d love to share my code, but I keep getting the message “new users didn’t upload”

Hi ,

You should be able to paste samples of your code into the editor. Once the code is pasted select the block of code and click on the icon in the top menu. This will wrap the code inside opening and closing ticks like these ``` and will format it as a code block.

Additionally or alternatively you could create a https ://codepen .io and paste the link in the editor.

Hello, How’s my code- Maybe you may help me.

Your tracking keys appear to be presently performing your desired actions. They will appear as the picture in post# 3 if more knobs are added.

Your videos may get centred using margin: car on the #video-grid rule.

#video-grid { display: flex; flex-direction: row; gap: 10px; overflow-x: auto; scroll-behavior: smooth; white-space: nowrap; padding: 10px; width: 100%; max-width: 100%; margin: 0 auto;}

You will need more than two videos to be current, of course, then they won’t size well.

To see the length of the factor, I’ve simply added a dark background.

Thanks I have added a margin: 0 auto; and the picture network has not changed. Could you please share your code?

#video-grid { display: flex; flex-direction: row; gap: 10px; overflow-x: auto; scroll-behavior: smooth; white-space: nowrap; padding: 10px; width: 100%; max-width: 100%; margin: 0 auto;}

,

Just a suggestion for codepen. All considered to be inside of the body is inside of the HTML section. electronic. g.

instead of this

 ... stuff before    
  
 
 <!-- Toggle button to collapse/expand the sidebar ... stuff afterwards

That window’s material should begin with that one.

  
 
 <!-- Toggle button to collapse/expand the sidebar ... stuff afterwards

A new window will open if you click the building image at the top right corner of the HTML tab.

As you can see all the code from your head should be pasted into the 'stuff for ' box.

This most likely won’t resolve your problem, but does clear things up a little.

Sorry you also need ratio: vehicle here:

.suggested-content { position: relative; top: 50px; left: 0px; width: 100%; max-width: 1200px; margin: auto;}

If you wanted the 2 movies centred next you’d have another ratio: car on that block.

e.g.

.video-scroll-container{margin:auto}

Is that not what you wanted? I assumed you simply wanted a centered structure, like the picture you posted in post# 3.

Additionally, you have a lot of minor problems, such as covering that is 100 % width, which causes the element to be too big to begin with. You definitely should have started with the box-sizing: border-box type and avoided those problems, but it’s probably too late right now.

That’s the reason you concealed the flow on the body, which is a terrible mistake because all it does is conceal errors but also lead to problems. A significant component of reactive style is taking note of when a display appears on the viewport, and then fixing the problem that led to it. If you just conceal the flow, you’ll be storing up problems for later.

Without a doubt, adding 100 % on standard elements will automatically result in full length. In this way, adding cushions won’t cause the component to malfunction.

I’ve cleaned up a dozen bits and pieces and put them in a fresh codepen.

Finally, that is what you are attempting to accomplish.

Owing, Paul! You’re a lifeline. I’m still novel to CSS, and actually, it’s been quite difficult to understand. I’ll undoubtedly keep an eye out for bookmark restaurants in the future and resolve any problems before moving on. The flow issue is still resolved despite the frontier field I used on the body. I didn’t appear to understand what’s causing it.

Right now, I’m working on another project—rebuilding the same website to promote my understanding. Because it’s progressing actually well, I’ll have to copy the video network code to center it correctly.

Only to affirm, is this the right way to heart the grid?

#video-grid { display: flex; /* Changed from grid to flex */ flex-direction: row; gap: 10px; overflow-x: auto; /* Enables horizontal scrolling */ scroll-behavior: smooth; /* Smooth scrolling */ white-space: nowrap; /* Prevents wrapping */ padding: 10px; margin: 0 auto; /* Centers the grid */}

In my new job, I even ran into a minor issue. Since I’m still learning, I tend to just go with the stream, but sometimes when I add parts, they end up hidden behind fixed parts. For instance, when I add material, it gets stuck behind my toolbar, and I have to put a percentage to make it obvious. Is this a good discipline, or am I doing everything wrong? I’ll give you a snapshot to understand.

Edit: I simply removed hidden overflow from the body, and now I can see that I have the scrollbar issue you mentioned. Damn I’m looking into dev tools to figure out how to fix it.

Edit2: Due to the amount of code I have – The only was I could fix it was adding overflow: clip; to the body.

I believe the overflowing issue is being caused by this nav. I may get bad though.

Edit: I have removed the folder, and the flow is still there. I ended up appliyingoverflow: clip;

You can see that the flow issue has been resolved for pc (you still need to work on smaller screens ) if you look at my codepen.

There were various guidelines that I changed. You could have simply removed the CSS from the CSS panels and used it.

Here are a few of the issues.

.main-container { display: flex; flex-direction: column; width: 100%; min-height: 100vh;}main { padding-left: 74px;}

100 % + 74px is also great for any box. Main doesn’t require any diameter at all, and it only needs a few inches to begin at the top, making it impossible to use a vertical slider.

.navs2 { position: fixed; display: flex; align-items: center; top: 62px; left: 0; height: 100vh; width: 3.5rem; background-color: var(--black); border-right: 1px solid var(--gunmetal); color: #fff; overflow-y: auto; transition: width 0.3s ease; padding: 20px 12px; font-size: 12px; font-weight: 500; display: block; flex-shrink: 0;}

It is too large diagonally right away due to being placed 62px above and having a 100vh plus 40px covering system.

html, body { height: 100vh; width: 100vw; margin: 0; padding: 0; overflow-x: hidden;}body { background-color: black; margin-top: 62px;}

100vh top + margin-62px is very large not to mention you have now limited browser and system to just 100vh so all overflows. Remove the 100 vh from HTML and body because it isn’t required and doesn’t make the site increase. Set heights are fixed and content won’t grow with them.

It would be best if you worked with the code from my codepen, which is entirely functional, since there are many similar errors with lengths and cushions that I have corrected for you.

That’s the issue with elements that are both fixedly and totally positioned. You must use special numbers to prevent them from overlapping different things because they do not participate in the flow. The fixed-position header was removed in the codepen, which in turn allows the page to move without being permanently thick. No special numbers are required to prevent the header from obscured material, as a result.

Whether or not that element has a maximum length or not depends on that. Or it depends on whether the structure is being dictated by a family of that component. In loneliness, the ratio: car does not center the movie grid as such.

Different rules may qualify if an ingredient has a height or maximum height, or if it’s a stretch or grid item. To make sure, I’d need to see what you have in position.

My website is looking great right now! I figured out what was causing the overflow and got it fixed. You taught me a valuable lesson about not always relying on width: 100%, and I really appreciate that, Paul.

That said, I still have one issue— I can’t seem to center the film network like you helped me complete before. Just to understand, this is a totally different job with a lot of changes, so there’s no point in referring back to the old one.

Had you help me find it sorted?

In that one consider changing the justify-content: self-start rule to this.

#video-grid{justify-content:center;}

( Notice that the margin: auto doesn’t work there because the component is full length so there is nothing to heart. if the ingredient is whole length, auto margins do nothing because the element itself is auto centers rather than its children.

You can also heart the pants container using the justify-content: facility,
law again.

.shorts-container { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; justify-content: center;}