Container and wrapper patterns in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding container max-width behavior

Given a container with a max-width set in Sass, what happens when the viewport width is smaller than the max-width?

SASS

$container-max-width: 60rem;
.container {
  max-width: $container-max-width;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

A The container width shrinks to fit the viewport width minus padding, never exceeding 60rem.

B The container width stays fixed at 60rem regardless of viewport size, causing horizontal scroll on small screens.

C The container width becomes zero when viewport is smaller than 60rem.

D The container width expands beyond 60rem to fill the viewport.

💡 Hint

Think about how max-width and auto margins work together in CSS.

The max-width property limits the container's maximum width to 60rem. When the viewport is smaller, the container shrinks to fit the viewport width minus padding. The margin-left: auto and margin-right: auto center the container horizontally.

📝 Syntax

intermediate

Identify the correct Sass syntax for a wrapper with padding

Which Sass code correctly defines a wrapper class with 2rem padding on all sides and a background color of light gray?

A

.wrapper {
  padding: 2rem;
  background-color: #d3d3d3;
}

B

.wrapper {
  padding: 2rem;
  background: lightgray;
}

C

.wrapper {
  padding: 2rem;
  background-color: lightgray;
}

D

.wrapper {
  padding: 2rem
  background-color: #d3d3d3;
}

💡 Hint

Check for missing semicolons and valid CSS properties.

Option A uses correct CSS property names and includes semicolons. Option A uses background shorthand which is valid but the question asks for background color specifically. Option A misses a semicolon after background-color. Option A misses a semicolon after padding.

❓ selector

advanced

Which selector targets only direct child containers inside a wrapper?

Given the HTML structure below, which Sass selector targets only the direct .container children of .wrapper?

SASS

<div class="wrapper">
  <div class="container">Direct child</div>
  <div>
    <div class="container">Nested container</div>
  </div>
</div>

A .wrapper ~ .container { color: blue; }

B .wrapper .container { color: blue; }

C .wrapper + .container { color: blue; }

D .wrapper > .container { color: blue; }

💡 Hint

Think about CSS combinators that select direct children only.

The > combinator selects only direct children. Option D correctly targets only .container elements that are immediate children of .wrapper. Option D selects all descendants, including nested ones. Options C and D select siblings, which is not the case here.

❓ layout

advanced

How to center a container horizontally with Sass and Flexbox?

Which Sass code snippet correctly centers a container horizontally inside a wrapper using Flexbox?

A

.wrapper {
  display: flex;
  justify-content: flex-start;
}
.container {
  width: 50rem;
}

B

.wrapper {
  display: flex;
  align-items: center;
}
.container {
  width: 50rem;
}

C

.wrapper {
  display: flex;
  justify-content: center;
}
.container {
  width: 50rem;
}

D

.wrapper {
  display: block;
  margin: 0 auto;
}
.container {
  width: 50rem;
}

💡 Hint

Remember that justify-content controls horizontal alignment in Flexbox.

Option C uses Flexbox with justify-content: center to center the container horizontally. Option C centers vertically with align-items. Option C uses block display and margin auto which works but is not Flexbox. Option C aligns items to the start, not center.

❓ accessibility

expert

Ensuring accessible focus within container and wrapper patterns

Which Sass approach best supports keyboard accessibility by visually indicating focus inside a container wrapper pattern?

A

.container:focus {
  background-color: #eee;
}

B

.container:focus-within {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

C

.wrapper:hover {
  border: 2px solid #005fcc;
}

D

.container:active {
  box-shadow: 0 0 5px #005fcc;
}

💡 Hint

Focus indication should appear when any child element inside the container has focus.

Option B uses :focus-within to apply a visible outline when any element inside the container is focused, improving keyboard navigation visibility. Option B only styles the container itself when focused, which is rare. Option B triggers on hover, not focus, and Option B triggers on active (mouse click), not keyboard focus.