diff --git a/curriculum/challenges/_meta/lecture-best-practices-for-responsive-web-design/meta.json b/curriculum/challenges/_meta/lecture-best-practices-for-responsive-web-design/meta.json index ad43233241f..98514c88a22 100644 --- a/curriculum/challenges/_meta/lecture-best-practices-for-responsive-web-design/meta.json +++ b/curriculum/challenges/_meta/lecture-best-practices-for-responsive-web-design/meta.json @@ -14,13 +14,13 @@ "id": "672cf05c3ad533eabe1e8197", "title": "How Do Media Queries Work, and What Are Some Common Media Types and Features?" }, - { - "id": "672cf06c8f46f9eb04db9832", - "title": "What Is the Mobile First Approach in Responsive Web Design?" - }, { "id": "672cf07a2b9796eb49719e03", "title": "What Are Media Breakpoints, and What Are Common Breakpoints in Modern Design?" + }, + { + "id": "672cf06c8f46f9eb04db9832", + "title": "What Is the Mobile First Approach in Responsive Web Design?" } ], "helpCategory": "HTML-CSS" diff --git a/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md b/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md index 2537cf3d3a7..3544dfee7e6 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md @@ -50,35 +50,35 @@ Think about how websites adapt to various device sizes. ## --text-- -In a mobile-first approach, which type of media query is typically used for breakpoints? +Which of the following is a commonly used breakpoint for smaller devices like smart phones? ## --answers-- -`max-width` +1640px ### --feedback-- -Consider how styles are added as screen sizes increase from mobile to desktop. +Review the beginning of the video to see where this was discussed. --- -`min-width` +640px --- -`max-height` +1200px ### --feedback-- -Consider how styles are added as screen sizes increase from mobile to desktop. +Review the beginning of the video to see where this was discussed. --- -`min-height` +2000px ### --feedback-- -Consider how styles are added as screen sizes increase from mobile to desktop. +Review the beginning of the video to see where this was discussed. ## --video-solution-- @@ -114,7 +114,7 @@ Think about which screen resolution is less commonly targeted in responsive desi --- -`2560px` (4K displays). +`6000px` (really large device). ## --video-solution--