Is it possible to adjust section heights for different screen sizes?

Hey everyone! I've been struggling with the development of a website where I had set a min-height of 100vh. I don't remember now if it was applied to the 'section' element or the 'body,' but it was causing a significant gap between sections, especially on tablets. After I realized that the issue was caused by that, I removed that property (naturally). Now, I want my sections to occupy the entire height of the screen, but I'm having trouble achieving this. This specifically affects the view on larger screens.
7 Replies
Jus Sus || 💀
Jus Sus || 💀•13mo ago
@ail3ngrimaldi Can you share codepen link, or any pictures of the website.
ail3ngrimaldi
ail3ngrimaldi•13mo ago
Sorry, I wasn't able to add it bc I hadn't access to a bigger screen. Here are the pictures and the code:
ail3ngrimaldi
ail3ngrimaldi•13mo ago
I want the section to fill all the height of the screen (1920x1080) I have a file for layout and another one for classes and configurations that are used all over the website (its not fully organised), I'll just share the properties that are beign applied for this. I was using min-height but it was looking awful on tablets, besides it added so much unnecessary space to the sections.
No description
ail3ngrimaldi
ail3ngrimaldi•13mo ago
This is on common.css : * { margin: 0; padding: 0; font-family: var(--font-primary); box-sizing: border-box;} a, button { text-decoration: none; cursor: pointer; } main { display: flex; flex-direction: column; } section { flex: 1; display: flex; padding: calc(2rem + 5vmin) calc(1rem + 4vmin); padding-top: var(--nav-height); } section>article { display: flex; justify-content: center; } This is on layout.css : html, body { all: initial; display: block; scroll-behavior: smooth; } body { display: flex; flex-direction: column; height: 100vh; background: var(--clr-olive-darker); font-family: var(--font-primary); color: var(--color-text); margin-top: var(--nav-height); }
Jus Sus || 💀
Jus Sus || 💀•13mo ago
@ail3ngrimaldi have you tried making the section height to be as 100vh, if yes what behavior does it show.
ail3ngrimaldi
ail3ngrimaldi•13mo ago
That's actually right on desktop and tablets, but on mobile views the content between sections vertically overlaps.
Jochem
Jochem•13mo ago
without a codepen or other live version of the entire site, it's hard to help
Want results from more Discord servers?
Add your server