Here is the link to the CodePen containing the code: https://codepen.io/gregelious/pen/zYmLGex
The CodePen features a restaurant menu with 3 categories (divs) displayed as separate boxes.
(For detailed instructions, visit: https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md)
The assignment included the following guidelines:
- When the width is greater than or equal to 992, each box should occupy one-third of the screen's width
- For widths between 768 and 991, the first two boxes should take up 50% of the screen width, while the third box occupies 100% on a new line
- For widths less than 768, each box should span the entire width, resulting in three separate lines
I assigned the divs IDs "first," "second," and "third," and provided the following CSS:
@media (min-width: 992) {
div {
width: 33.33%;
}
}
@media (min-width: 768) and (max-width: 991) {
#first, #second {
width: 50%;
}
#third {
width: 100%;
}
}
Despite my efforts, the sizes of the divs are not adjusting when I resize the browser window, and I'm struggling to find a solution. This assignment was part of a Coursera course, and despite reviewing relevant materials, I haven't been able to progress.