After previously asking about a different issue with this project, I have encountered yet another problem.
The task at hand requires using three distinct media queries to alter the page layout depending on the screen size in use (currently being tested by adjusting my browser window). These three queries are expected to function as follows:
Screen Size <400:
Background 1
Vertical bulleted lists.
Bulleted lists positioned below the two columns.
The Road to Enlightenment section above the Make it Good section.
Screen Size >=400 and <500:
Background 2
Horizontal bulleted lists.
Bulleted lists placed to the right of the two columns.
The Road to Enlightenment sections situated to the left of the Make it Good section.
Screen Size <500:
Similar to the previous query but with background 3.
Everything appears to be working correctly except for getting the columns to display side-by-side once the size reaches 400. By that, I mean when resizing the window, the background changes properly, everything seems fine, except the columns fail to align side-by-side until the screen is halfway between its narrowest point and maximized (I hope that clarifies the issue).
Below is my CSS code:
@media (max-width: 399px) {
//CSS for Screen <400
}
@media (max-width: 499px) and (min-width: 400px) {
//CSS for Screen >=400 and <500
}
@media (min-width: 500px) {
//CSS for Screen >=500
}
Although the project instructions don't allow modifications to the HTML, only CSS adjustments, any recommendations on resolving this column alignment issue would be greatly valued.