Scale homepage carousel controls down for mobile #715
Conversation
Two of the titles added in #680 were wide enough that the homepage carousel controls could overlap the text. This commit changes the sizing rules for screens below the small breakpoint to keep the arrows centered over the image rather than the combined image + overlay.
|
@acdha - here's a quick mockup for the iPhone (375px) with some of the specs I used. Also, change the title text from uppercase to title case (that should save some space as well).
|
|
At the smaller breakpoints, I'd recommend keeping the arrows at a fixed distance from the image and NOT centering it horizontally with all the text (Title, Description, CTA button) because as those vary in overall height, the left/right arrows end up bouncing up and down sometimes, which would be less than desirable for a user navigating. |
|
Currently it's not aligned at all with the text — it's centered vertically over the image. I should be able to change that to stay consistently below the image but that's complicated by the viewport-specific sizing. |
This avoids the indicators overlapping the overlay for display widths between 760px and 840px.
This changes the arrows to be just below the image rather than centered over it. This required adjusting the maximum width of the title element to maintain spacing between them.
|
@jbresner Here are some screenshots at various sizes from a Samsung S9 screen through a tablet:
|
|
@acdha How much effort does it take to create a media query for the left/right arrows so the mobile versions (where the arrows aren't over the image) are solid black instead of white with outlines? I know it's not an ideal to have the two sets of arrows but because they're moving from images to a known solid color background, I'd rather they be as noticeable as possible in both cases. |
|
We already have one so it's really just a question of the size of the extra SVG image(s) |
|
@acdha the last item you need is the smaller svg arrow correct? |
|
The images scale down already (they're SVG so this looks fine) so it's just a question of whether we want separate images to flip the color or do something like put a CSS |
In this case we know the arrows will be on a solid white background so we can simply invert them to reliably have black on white.
|
With a2c4748 it looks like this on mobile:
|
Two of the titles added in #680 were wide enough that the homepage
carousel controls could overlap the text. This commit changes the sizing
rules for screens below the small breakpoint to keep the arrows centered
over the image rather than the combined image + overlay.
Before
“By the People” is fine on most devices:
… but “Letters to Lincoln” is not:
After