Improve promo-image layout #1017

Merged
merged 1 commit into from Sep 27, 2016

Conversation

Projects
None yet
2 participants
@skoolbus39
Member

skoolbus39 commented Sep 26, 2016

I received feedback that the promo image layout has some issues: “Promo image text doesn't display well on mobile. It's too large and has too much line-height. It often overlaps the red nav bar on mobile. Can you make the text and line height smaller at the 480px breakpoint by default?”

This update:

  • Reduces font-size for browser widths < 768px wide
  • Removes pixel-based font-size fallbacks
  • Specifies a line-height of 1
  • Adds a left and right margin so text does not run to the edge of the browser chrome
  • Adds margin-top to anchors (buttons) that immediately follow the promo text to provide adequate vertical space in between
Improve promo-image layout
I received feedback that the promo image layout has some issues: “Promo image text doesn't display well on mobile. It's too large and has too much line-height. It often overlaps the red nav bar on mobile. Can you make the text and line height smaller at the 480px breakpoint by default?”

This update:
* Reduces font-size for browser widths < 768px wide
* Removes pixel-based font-size fallbacks
* Specifies a line-height of 1
* Adds a left and right margin so text does not run to the edge of the browser chrome
* Adds margin-top to anchors (buttons) that immediately follow the promo text to provide adequate vertical space in between

@kabel kabel merged commit 1ceaaac into unl:develop Sep 27, 2016

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment