improve layout
colinbrislawn opened this issue · comments
Fix #sidebar so that
- it does not cover any of the page while on mobile. See Young-Artists
- words are not split across multiple lines (maybe using a
<br>, or better yet a css setting).
Improve top image so that it does not get cut off at strange places or leave weird gaps.
Improve cues to avoid a ghost action button
Currently, there are two goals when displaying the background image.
- Fill the full width and height of the banner
background-size: cover; - Display the group title without scrolling down by using
height: 80%
To meet both of these requirements, the images is cropped either at the top or bottom. To introduce a new goal...
- Don't dramatically crop the banner image.
... one of the previous goals must be dropped.
Maybe we could feature the title in a new location?
Or we could make background-size match .container @media width which would solve this problem for many screen sizes.
On narrow screens (@media), have heading (and images?) clear: both; to avoid this:
