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
Custom Fields and Meta Data - Meta queries for filtering - Quiz 5medium Custom Theme Development - Template parts - Quiz 2easy Custom Theme Development - Custom page templates - Quiz 6medium Shortcodes and Blocks - Why reusable content elements matter - Quiz 6medium Shortcodes and Blocks - Block attributes and controls - Quiz 10hard WordPress Hooks System - add_action and add_filter - Quiz 13medium WordPress Query and Database - Query parameters - Quiz 12easy WordPress Query and Database - Query parameters - Quiz 9hard WordPress Query and Database - Custom post type queries - Quiz 6medium WordPress Query and Database - WP_Query class - Quiz 13medium