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
@ail3ngrimaldi Can you share codepen link, or any pictures of the website.
Sorry, I wasn't able to add it bc I hadn't access to a bigger screen.
Here are the pictures and the code:
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.
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); }@ail3ngrimaldi have you tried making the section height to be as 100vh, if yes what behavior does it show.
That's actually right on desktop and tablets, but on mobile views the content between sections vertically overlaps.
without a codepen or other live version of the entire site, it's hard to help