Challenge 2: Backgrounds & Overflow
This challenge includes a layout seen on news sites. We have the top 5 headlines of the day, arranged in different ways and with different elements at different breakpoints. For mobile, we scroll horizontally to see the options. Larger screen sizes may get fewer images and a different layout.
Don’t worry about performance for this project. You may hide and show images and content as needed to achieve this layout.
Questions to consider
- Usually when working with CSS layouts, we have flexible widths to each cell, using units like %, rem, fr, vw, etc. Does it ever make sense to use a fixed width in the layout? What about a range of widths?
Next Level Ideas
While these challenges require only HTML and CSS, if you want to take them next level by including more programming language(s), here's an idea.
- How could you load the content you need to achieve each layout at each breakpoint, rather than loading all content and revealing it selectively?
Hints/Spoilers
You may want to look into
minmax()
for dealing with cell widths.
The scrollbar is just a browser scrollbar. How did we style it? https://ishadeed.com/article/custom-scrollbars-css/.