Description
There’s a CSS layout quirk with how the page is structured: the <body> is set as a flex container (from the default Vite stylesheet) but without specifying flex-direction: column. As a result, the year slider input that’s appended and the main content container are treated as flex items in a row by default style.css. This can cause the slider to appear to the left of the content, rather than above it. Additionally, the use of place-items: center on a flex container is not standard (that property works for CSS Grid); only align-items is actually centering items vertically in this case, while horizontally they start from the left. In summary, the page layout might not be as intended on some screens – content might not be top-aligned, and the slider may not be centered properly.
Steps to Reproduce
- Load the page on a desktop browser. Observe the placement of the year slider relative to the main content.
- If the content height isn’t too tall, you might see the slider floating to the left and the “Hi, I’m Deep” hero text to the right of it, both centered vertically (because of the flex container). On very tall content or smaller screens, the effect might be less obvious, but the structure is still odd in code.
- Inspect the CSS on the body: it shows
display: flex; place-items: center; without a column direction style.css
- The presence of an empty #slider-container div and the slider being appended directly to body also suggest an oversight.
Expected Behavior
The slider should likely sit above the content (or integrated in the header) and the content should be centered on the page without awkward gaps. If the intention was to center the whole page, using flex-direction: column on body would stack the slider and content and center them vertically/horizontally as a unit. Alternatively, not using flex at all on body and just using standard block layout (with maybe text-align: center on the container) would avoid this side-by-side issue. The #slider-container could be used to position the slider (e.g., via CSS) if needed.
Actual Behavior
Due to the current CSS, the DOM order is: <input type="range"> (slider) followed by the (empty) #slider-container div, then the #app content div. With flex row, this means the slider and content share a row. The content has max-width: 1280px; margin: 0 auto; which in a flex context centers it if there’s space, but the slider on the left prevents it from occupying the full top line. The result is a somewhat strange alignment. Many users might not notice outright, but it can cause the hero section not to be top-aligned as expected.
Why It Matters
This appears to be an unintended layout stemming from leftover template code. It could lead to responsive issues or simply a less tidy presentation. Clean, predictable layout code is also easier to maintain. Fixing this will ensure the site looks consistent across different screen sizes and there’s no unexpected whitespace or alignment oddities.
Recommended Fix
Adjust the CSS and HTML for clarity:
- Remove or repurpose the
#slider-container if it’s not being used. Ideally, append the slider into #slider-container (instead of directly to body) to match the intention. Then you can style #slider-container (or the slider itself) to position it (maybe center it at top of page with text-align: center or so).
- In the global CSS (perhaps in style.css), add
flex-direction: column; to the body if you still need the body as flex for vertical centering. Alternatively, remove display: flex from body altogether, and let the content flow normally (since you’re already centering #app with margin auto and text-align center). The key is to ensure the slider is on its own line above the content.
- Use standard flex properties: replace
place-items: center; with explicit align-items: center; justify-content: center; if needed (though with column direction, justify-content center would vertically center the whole content within viewport – which you might or might not want).
- Test on both wide desktop and mobile to ensure the hero section now appears as intended (likely the “Hi, I’m Deep” should be below the slider, not beside it).
Making these changes will tidy up the layout and remove any unintended side-by-side behavior.
Assignee: @deepjoshi11th
Description
There’s a CSS layout quirk with how the page is structured: the
<body>is set as a flex container (from the default Vite stylesheet) but without specifyingflex-direction: column. As a result, the year slider input that’s appended and the main content container are treated as flex items in a row by default style.css. This can cause the slider to appear to the left of the content, rather than above it. Additionally, the use ofplace-items: centeron a flex container is not standard (that property works for CSS Grid); onlyalign-itemsis actually centering items vertically in this case, while horizontally they start from the left. In summary, the page layout might not be as intended on some screens – content might not be top-aligned, and the slider may not be centered properly.Steps to Reproduce
display: flex; place-items: center;without a column direction style.cssExpected Behavior
The slider should likely sit above the content (or integrated in the header) and the content should be centered on the page without awkward gaps. If the intention was to center the whole page, using flex-direction: column on body would stack the slider and content and center them vertically/horizontally as a unit. Alternatively, not using flex at all on body and just using standard block layout (with maybe
text-align: centeron the container) would avoid this side-by-side issue. The#slider-containercould be used to position the slider (e.g., via CSS) if needed.Actual Behavior
Due to the current CSS, the DOM order is:
<input type="range">(slider) followed by the (empty)#slider-containerdiv, then the#app contentdiv. With flex row, this means the slider and content share a row. The content hasmax-width: 1280px; margin: 0 auto;which in a flex context centers it if there’s space, but the slider on the left prevents it from occupying the full top line. The result is a somewhat strange alignment. Many users might not notice outright, but it can cause the hero section not to be top-aligned as expected.Why It Matters
This appears to be an unintended layout stemming from leftover template code. It could lead to responsive issues or simply a less tidy presentation. Clean, predictable layout code is also easier to maintain. Fixing this will ensure the site looks consistent across different screen sizes and there’s no unexpected whitespace or alignment oddities.
Recommended Fix
Adjust the CSS and HTML for clarity:
#slider-containerif it’s not being used. Ideally, append the slider into#slider-container(instead of directly to body) to match the intention. Then you can style#slider-container(or the slider itself) to position it (maybe center it at top of page withtext-align: centeror so).flex-direction: column;to the body if you still need the body as flex for vertical centering. Alternatively, removedisplay: flexfrom body altogether, and let the content flow normally (since you’re already centering#appwith margin auto and text-align center). The key is to ensure the slider is on its own line above the content.place-items: center;with explicitalign-items: center; justify-content: center;if needed (though with column direction, justify-content center would vertically center the whole content within viewport – which you might or might not want).Making these changes will tidy up the layout and remove any unintended side-by-side behavior.
Assignee: @deepjoshi11th