Submitted over 1 year ago

[SCSS] workit landing page

Arne•1,110

@Dudeldups

Preview site View code

This is a solution for...Workit landing page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

This was fun 🤠

Quick recap:

I kept media queries to a minimum by using clamp()s. I do like clamps. 🤓
I used a main.scss file again, with over 300 lines it's pretty bloated. I should look for a way to organize it better.
Since the sections need different background-colors, I didn't know how to keep the inline-padding for them. Setting a padding on the body would also push the backgrounds. I went with a mixin for padding-inline and set that on each section. Probably not the best approach.
Because I can't really target all the content, I was unable to set a max-width for it. Consequently, the website does not appear well on very large screens. 🤔
I'm not sure if anything needs to be added to the HTML for accessibility either.

Please let me know what you think or if you see any potential for improvement. ✅

Thank you 🙂

Community feedback

markus•2,250

@markuslewinPosted over 1 year ago

I like to wrap the content in <div class="center"> in cases like this! The background of the section reaches the edges of the page, but the content has some max width.

.center {
box-sizing: content-box;
max-inline-size: 69.375rem;
margin-inline: auto;
padding-inline: 2rem;
}

Arne•1,110

@DudeldupsPosted over 1 year ago

@markuslewin I don't fully understand. box-sizing: content-box still places the box inside the parent container. If the parent container has a padding, the box will not reach the edge of the screen 🤨

markus•2,250

@markuslewinPosted over 1 year ago

@Dudeldups The box-sizing: content-box makes it so that the padding-inline isn't included in the max-inline-size calculation. I'd wrap the text content, but put it inside the section that has a background.

<section class="middle">
<div class="center">
<img class="middle__hero-img" />
<ol class="middle__list"></ol>
</div>
</section>

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord