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.

Practice

1. What is the main purpose of a container in Sass when building layouts?

easy

A. To add background colors to all page elements

B. To create animations for buttons

C. To center content and limit its maximum width for better readability

D. To change font sizes globally

Solution

1. Step 1: Understand container role in layout

   A container is used to keep content centered and restrict its width so it doesn't stretch too wide on large screens.

2. Step 2: Compare options to container purpose

   Options B, C, and D describe unrelated tasks like colors, animations, and fonts, which are not the container's main job.

3. Final Answer:

   To center content and limit its maximum width for better readability -> Option C

4. Quick Check:

   Container = center + max-width [OK]

Hint: Containers control width and center content [OK]

Common Mistakes:

• Thinking containers add colors or animations
• Confusing containers with global font settings
• Ignoring the width limit role

2. Which of the following Sass code snippets correctly defines a reusable container mixin with max-width and horizontal centering?

easy

A. @mixin container { max-width: 1200px; margin: 10px; }

B. @mixin container { width: 100%; padding: 0; }

C. @mixin container { max-width: 1200px; padding: 20px; float: left; }

D. @mixin container { max-width: 1200px; margin: 0 auto; }

Solution

1. Step 1: Identify correct container mixin properties

   A container mixin should limit max-width and center horizontally using margin: 0 auto.

2. Step 2: Evaluate each option

   @mixin container { max-width: 1200px; margin: 0 auto; } uses max-width and margin: 0 auto correctly. @mixin container { width: 100%; padding: 0; } lacks max-width and centering. @mixin container { max-width: 1200px; padding: 20px; float: left; } uses float which breaks centering. @mixin container { max-width: 1200px; margin: 10px; } uses margin: 10px which does not center horizontally.

3. Final Answer:

   @mixin container { max-width: 1200px; margin: 0 auto; } -> Option D

4. Quick Check:

   Mixin container = max-width + margin auto [OK]

Hint: Center with margin: 0 auto and set max-width [OK]

Common Mistakes:

• Using float breaks horizontal centering
• Setting margin to fixed pixels instead of auto
• Omitting max-width property

3. Given the Sass code below, what will be the rendered max-width and horizontal margin of the .wrapper class?

@mixin container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}

.wrapper {
  @include container;
  background-color: #eee;
}

medium

A. max-width: 1000px; margin-left and margin-right auto; padding: 1rem

B. max-width: 1000px; margin: 0; padding: 1rem

C. width: 100%; margin-left and margin-right auto; padding: 0

D. max-width: 1200px; margin: 0 auto; padding: 1rem

Solution

1. Step 1: Analyze the mixin properties

   The mixin sets max-width to 1000px, margin-left and margin-right to auto, and padding to 1rem.

2. Step 2: Check the included styles in .wrapper

   The .wrapper class includes the mixin, so it inherits all those properties exactly.

3. Final Answer:

   max-width: 1000px; margin-left and margin-right auto; padding: 1rem -> Option A

4. Quick Check:

   Mixin properties = max-width 1000px + margin auto + padding 1rem [OK]

Hint: Mixin properties apply exactly when included [OK]

Common Mistakes:

• Assuming margin shorthand instead of separate margins
• Confusing max-width with width
• Ignoring padding property

4. Identify the error in this Sass container mixin and how to fix it:

@mixin container {
  max-width 1200px;
  margin: 0 auto;
  padding: 1rem;
}

medium

A. Padding value should be in pixels, not rem

B. Missing colon after 'max-width' property name

C. Incorrect use of 'margin' shorthand property

D. Mixin name 'container' is reserved and cannot be used

Solution

1. Step 1: Check syntax of each property

   The line 'max-width 1200px;' is missing a colon ':' after 'max-width'. It should be 'max-width: 1200px;'.

2. Step 2: Verify other properties and naming

   Margin shorthand and padding with rem are valid. The mixin name 'container' is allowed.

3. Final Answer:

   Missing colon after 'max-width' property name -> Option B

4. Quick Check:

   CSS properties need colon after name [OK]

Hint: CSS properties always need colon after name [OK]

Common Mistakes:

• Forgetting colon after property name
• Thinking rem units are invalid
• Believing mixin names are reserved words

5. You want to create a responsive wrapper mixin in Sass that uses a max-width of 1200px on large screens, but 90% width on smaller screens, with horizontal centering and 2rem padding. Which code correctly implements this using container and media query?

hard

A. @mixin wrapper { width: 90%; margin: 0 auto; padding: 2rem; @media (min-width: 768px) { max-width: 1200px; width: auto; } }

B. @mixin wrapper { max-width: 1200px; margin: 0 auto; padding: 2rem; width: 90%; @media (min-width: 768px) { width: 1200px; } }

C. @mixin wrapper { max-width: 1200px; margin: 0 auto; padding: 2rem; @media (max-width: 768px) { width: 90%; } }

D. @mixin wrapper { max-width: 1200px; margin: 0 auto; padding: 2rem; width: 90%; @media (max-width: 768px) { width: 1200px; } }

Solution

1. Step 1: Understand responsive width requirements

   On small screens, width should be 90%. On larger screens (min-width 768px), max-width 1200px with centered margin and padding applies.

2. Step 2: Analyze each option's media query logic

   @mixin wrapper { width: 90%; margin: 0 auto; padding: 2rem; @media (min-width: 768px) { max-width: 1200px; width: auto; } } sets width 90% by default, then at min-width 768px sets max-width 1200px and width auto, which correctly applies the desired behavior. @mixin wrapper { max-width: 1200px; margin: 0 auto; padding: 2rem; width: 90%; @media (min-width: 768px) { width: 1200px; } } incorrectly sets width 1200px inside min-width media query, which is fixed width, not max-width. @mixin wrapper { max-width: 1200px; margin: 0 auto; padding: 2rem; @media (max-width: 768px) { width: 90%; } } uses max-width 1200px by default and changes width 90% at max-width 768px, which reverses the logic. @mixin wrapper { max-width: 1200px; margin: 0 auto; padding: 2rem; width: 90%; @media (max-width: 768px) { width: 1200px; } } sets width 90% by default but sets width 1200px at max-width 768px, which is incorrect.

3. Final Answer:

   @mixin wrapper { width: 90%; margin: 0 auto; padding: 2rem; @media (min-width: 768px) { max-width: 1200px; width: auto; } } -> Option A

4. Quick Check:

   Responsive wrapper = width 90% small + max-width 1200px large [OK]

Hint: Use min-width media query to increase max-width on large screens [OK]

Common Mistakes:

• Using max-width inside max-width media query instead of min-width
• Setting fixed width instead of max-width on large screens
• Reversing media query logic for screen sizes