We’d need to see the code for your page and a bit more detail on what you are trying to accomplish.
It doesn’t actually look viable from your screenshot to stretch the nav all the way across as the buttons will be too big and stretched.
Thamks for your reply, I am trying to achieve something like this -
Also I would love to share my code but I get an error saying “new users can’t upload”
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, Here’s my code - Hopefully you can help me.
Your navigation buttons seem to already be doing what you want. If you add more buttons they will look like the screenshot in post#3.
Your videos could be centred using margin: auto 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;
}
Obviously you will need to have more than 2 videos present otherwise they won’t scale across.
I’ve just added a red background to see the width of the element.
Thanks I have added a margin: 0 auto; and there is no change to the video grid. 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 tip for codepen. Everything inside of the HTML section is considered to be inside of the body. e.g.
instead of this
... stuff before
<!-- Web App Manifest -->
<link rel=" manifest" href="site.webmanifest" />
<title>RabbitHole - The #1 Uncensored Free Speech Video Platform</title>
</head>
<body>
<div class="overlay"></div>
<!-- Header -->
<header class="header">
<div class="header-div">
<!-- Toggle button to collapse/expand the sidebar
... stuff afterwards
The content of that window should start with
<div class="overlay"></div>
<!-- Header -->
<header class="header">
<div class="header-div">
<!-- Toggle button to collapse/expand the sidebar
... stuff afterwards
If you click on the setting icon ⛭ top right of the html tab it will open a new window.
As you can see all the code from your head should be pasted into the 'stuff for <head>' box.
This most likely won’t solve your issue, but will clean things up a bit.
Sorry you also need margin:auto here:
.suggested-content {
position: relative;
top: 50px;
left: 0px;
width: 100%;
max-width: 1200px;
margin: auto;
}
If you wanted the 2 videos centred then you’d need another margin:auto on that block.
e.g.
.video-scroll-container{margin:auto}
Is that not what you wanted? I was assuming you just wanted a centred layout like the screenshot you posted in post #3.
You also have a lot of little errors such as including padding on to 100% widths which makes the element too large to start with. You probably should have used the box-sizing: border-box model to start with and avoided those issues but probably too late now.
That’s the reason you have hidden the overflow on the body which is a bad mistake as all it does is hide the errors but they will still cause issues. A key point in responsive design is noticing when a scrollbar appears on the viewport and then addressing the issue that caused it. If you simply hide the overflow you are storing up trouble for later.
On normal elements you don’t need to add width:100% anyway as the with will be auto which effectively means full width. In that way adding padding will not break the element.
I’ve tidied up a few bits and pieces and forked it into a new codepen.
Hopefully that is what you are trying to achieve.
Thanks, Paul! You’re a lifesaver. I’m still new to CSS, and honestly, it’s been quite challenging to learn. I’ll definitely keep an eye out for scroll bars in the future and fix any issues before moving on. I have used border box on the body but it still doesn’t help the overflow problem. I can’t seem to find out what is causing it.
Right now, I’m working on another project—rebuilding the same website to reinforce my learning. It’s coming along really well, so I’ll need to copy the video grid code to properly center it.
Just to confirm, is this the correct way to center 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 */
}
I also ran into a small issue in my new project. Since I’m still learning, I tend to just go with the flow, but sometimes when I add elements, they end up hidden behind fixed elements. For example, when I add content, it gets stuck behind my sidebar, and I have to add a margin to make it visible. Is this a good practice, or am I doing something wrong? I’ll send you a screenshot to clarify.
Edit: I just removed hidden overflow from the body and I see I have the scrollbar problem you talked about… Damn I am looking at dev tools now to see 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.
This nav is what is causing the overflow problem I think. I could be wrong though.
Edit: I have removed the header, and the overflow is still there.I ended up appliying overflow: clip;
If you look at my codepen you will see that the overflow issue is solved for desktop (you still have work for smaller screens to do).
There were multiple rules that I changed. You could have just taken the css from the css panel and used it.
Here are a few of the problems.
.main-container {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}
main {
padding-left: 74px;
}
100% + 74px is too big for any container. Main doesn’t need a width at all and its 100% height is starting at some distance from the top so creates a vertical scrollbar when none is needed.
.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;
}
100vh + 40px padding plus being placed 62px from the top makes it too big vertically right of the bat.
html, body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
background-color: black;
margin-top: 62px;
}
100vh height + margin-62px is too tall not to mention you have now limited html and body to only 100vh so everything overflows. Remove the 100vh from html and body as its not needed and doesn’t allow the page to grow. Fixed heights are fixed and won’t grow to accommodate content,
There are many similar mistakes with widths and padding which I have corrected for you so its best if you work with the code from my codepen which is fully working 
That’s the problem with fixed positioned and absolutely positioned elements. They do not take part in the flow so you have to use magic numbers to avoid them overlapping other things. In the codepen I revised for you I removed the fixed positioned header and used position: sticky instead which means it holds the flow of the page automatically until it becomes sticky. That means no magic numbers needed for the header to stop it obscuring content.
It all depends whether that element has a max width or not. Or it depends if a parent of that element is controlling the layout. In isolation the margin:auto will not centre the video grid as such.
If an element has a width or max width or is perhaps a flex or grid item then different rules may apply. I’d need to see what you have in place to make sure.
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 video grid like you helped me do before. Just to clarify, this is a completely different project with a lot of changes, so there’s no point in referring back to the old one.
Could you help me get it sorted?
In that one try changing the justify-content:self-start rule to this.
#video-grid{justify-content:center;}
(Note that the margin:auto doesn’t work there because the element is full width so there is nothing to centre. margin:auto centres the element itself not its children so if the element is full width then auto margins do nothing.)
You can also centre the shorts container using the justify-content: center;
rule again.
.shorts-container {
display: flex;
gap: 15px;
overflow-x: auto;
padding-bottom: 10px;
scrollbar-width: none;
justify-content: center;
}
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.