What is the purpose of a CSS media query?

To load external CSS files faster

To apply different styles based on conditions like viewport width or device features

To combine multiple CSS files into one

To create animations and transitions

A website uses a fixed-width layout of 960px. The developer wants the layout to adapt to smaller screens so that on a 480px-wide phone the main content column becomes full-width and stacks below the sidebar. Which approach is the most appropriate first step?

Use `transform: scale(0.5)` on the body

Set `overflow-x: hidden` on the body

Change the fixed width to `width: 100%` without media queries

Add a media query at `max-width: 480px` that changes the grid to a single column

What is a key advantage of CSS Grid over older layout techniques like floats?

It creates two-dimensional layouts with rows and columns simultaneously.

It allows text to wrap around images.

It eliminates the need for media queries.

It automatically resizes images to fit the viewport.

LPI Web Development Essentials

Domain 3Objective 4

033.4 CSS Box Model and Layout (weight: 2) WEB-DEVELOPMENT-ESSENTIALS Practice Questions (Page 2)

Part of the 033 CSS Content Styling domain, which makes up ~25% of our current practice bank. Linux Professional Institute does not publish an official question count, but from its 60-minute exam (~25–40 total, ~6–10 in this domain), expect 2–3 from this objective — we provide 34 practice questions to prepare you well beyond it. (estimate)

34questions here

7free pages

9concepts

Questions 6–10

6application · medium
A developer sets `width: 300px` on a `<div>` that contains a 20px border and 15px padding on all sides. The layout team reports the element is taking up more horizontal space than the 300px specified in the design. Which CSS property change makes the element's total rendered width exactly 300px?
Select an answer first
7foundation · easy
What is the purpose of a CSS media query?
Select an answer first
8foundation · easy
Which CSS position value keeps an element in the normal flow but allows it to be offset from its original position using top, right, bottom, or left?
Select an answer first
9application · medium
A website uses a fixed-width layout of 960px. The developer wants the layout to adapt to smaller screens so that on a 480px-wide phone the main content column becomes full-width and stacks below the sidebar. Which approach is the most appropriate first step?
Select an answer first
10foundation · easy
What is a key advantage of CSS Grid over older layout techniques like floats?
Select an answer first

Finished these 5 questions?

Review the revealed explanations, or continue through the curriculum.

Next 5 questions →Back to WEB-DEVELOPMENT-ESSENTIALS

Free Basic Practice is a study aid with revealable answers — not a scored exam. Examers.io is independent and not affiliated with or endorsed by Linux Professional Institute. “WEB-DEVELOPMENT-ESSENTIALS” is a trademark of its owner, used for identification only.

033.4 CSS Box Model and Layout (weight: 2) WEB-DEVELOPMENT-ESSENTIALS Practice Questions (Page 2)

Questions 6–10

A developer sets `width: 300px` on a `<div>` that contains a 20px border and 15px padding on all sides. The layout team reports the element is taking up more horizontal space than the 300px specified in the design. Which CSS property change makes the element's total rendered width exactly 300px?

What is the purpose of a CSS media query?

Which CSS position value keeps an element in the normal flow but allows it to be offset from its original position using top, right, bottom, or left?

A website uses a fixed-width layout of 960px. The developer wants the layout to adapt to smaller screens so that on a 480px-wide phone the main content column becomes full-width and stacks below the sidebar. Which approach is the most appropriate first step?

What is a key advantage of CSS Grid over older layout techniques like floats?

Keep studying — 033 CSS Content Styling