Responsive theme patterns in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add the viewport meta tag for responsive design in a WordPress theme header.

Wordpress

<meta name="viewport" content="width=[1], initial-scale=1">

Drag options to blanks, or click blank then click option'

Adevice-width

Bwidth

Cscreen-width

Ddevice-scale

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'width' instead of 'device-width' causes fixed width layouts.

Using 'screen-width' is not a valid viewport value.

The viewport meta tag uses device-width to make the page width match the device's screen width, enabling responsive layouts.

2fill in blank

medium

Complete the CSS media query to apply styles only on screens smaller than 768px.

Wordpress

@media only screen and (max-[1]: 768px) { /* styles here */ }

Drag options to blanks, or click blank then click option'

Aheight

Bdevice-width

Cwidth

Dresolution

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'height' instead of 'width' targets vertical size, not horizontal.

Using 'device-width' inside media queries is less common and can cause issues.

The max-width media query targets screen widths up to 768 pixels, commonly used for tablets and smaller devices.

3fill in blank

hard

Fix the error in the WordPress function to enqueue a responsive stylesheet.

Wordpress

function theme_enqueue_styles() {
  wp_enqueue_style('responsive-style', get_template_directory_uri() . '/css/[1].css');
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

Drag options to blanks, or click blank then click option'

Astyles

Bstyle

Cresponsive-style

Dresponsive

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'style' or 'styles' when the file is named 'responsive.css'.

Using the handle name instead of the filename.

The CSS file is named 'responsive.css' in the theme's css folder, so the correct filename is 'responsive'.

4fill in blank

hard

Fill both blanks to create a responsive image tag in a WordPress theme using srcset and sizes attributes.

Wordpress

<img src="image-small.jpg" srcset="image-small.jpg 480w, image-large.jpg [1]" sizes="(max-width: 600px) [2], 100vw" alt="Responsive image">

Drag options to blanks, or click blank then click option'

A800w

B100vw

C600px

D480w

Attempts:

3 left

💡 Hint

Common Mistakes

Using '600px' in srcset instead of a width descriptor like '800w'.

Confusing sizes values with srcset widths.

The srcset attribute uses '800w' to indicate the width of the large image. The sizes attribute uses '100vw' to specify the image should take full viewport width beyond 600px.

5fill in blank

hard

Fill all three blanks to create a responsive navigation menu in WordPress using a toggle button and ARIA attributes.

Wordpress

<button aria-[1]="primary-menu" aria-[2]="false" id="menu-toggle">Menu</button>
<nav id="primary-menu" class="menu" [3]="navigation">...</nav>

Drag options to blanks, or click blank then click option'

Acontrols

Bexpanded

Clabel

Drole

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'aria-label' instead of 'aria-controls' on the button.

Missing the 'role' attribute on the nav element.

The button uses aria-controls to link to the menu, aria-expanded to indicate toggle state, and the nav uses role="navigation" for accessibility.