Bird
0
0

You want a WordPress theme to show a two-column layout on desktops and a single column on phones. Which CSS approach achieves this?

hard📝 Application Q8 of 15
Wordpress - Custom Theme Development
You want a WordPress theme to show a two-column layout on desktops and a single column on phones. Which CSS approach achieves this?
AUse float:left for columns and clear floats on phones
BUse flexbox with flex-direction: row; and media query to change to column
CUse fixed widths for columns without media queries
DUse absolute positioning for columns
Step-by-Step Solution
Solution:
  1. Step 1: Understand flexbox layout

    Flexbox with flex-direction: row creates horizontal columns.
  2. Step 2: Use media query to switch layout

    Changing flex-direction to column stacks items vertically on phones.
  3. Final Answer:

    Use flexbox with flex-direction: row; and media query to change to column -> Option B
  4. Quick Check:

    Flexbox + media query = responsive columns [OK]
Quick Trick: Change flex-direction in media queries for responsive columns [OK]
Common Mistakes:
  • Using fixed widths prevents responsiveness
  • Relying on floats is outdated
  • Absolute positioning breaks flow

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Wordpress Quizzes