The next step is for us to design the sidebar. The sidebar itself is not actually visible; you only see the boxes contained in it (article elements).
However, with the intention of providing a visual indication that the text was truncated in these places, assign the following additional property:
This adds three dots (the typographical term is an ellipsis) dynamically at the end of the truncated text.
With a viewport size between 601px and 800px the articles within the “sidebar” (now aligned below) should appear alongside each other. You can input this in two separate media queries. But you can also combine the two breakpoints:
This means that the properties specified only apply to viewport sizes between the two values.
Assign in this case the following properties for the articles:
Width: 30% each
Spacing to the right: 5%, no spacing for last box
Toggle the box model for this so that the padding is no longer added to the width.