• We are STAs
    • Abriella Corker
    • Angie Huang
    • Athena Zeng
    • Bridget Kessler
    • Cristina Villarreal Núñez
    • De’sha Bass-McClellan
    • Ingrid Alberding
    • Jake Engelberg
    • Megan Fletcher
    • Miguel Yapur
    • Mounika Tadanki
    • Poonum Mehta
    • Relena Lai
    • Sheryl Long
    • Thuy Nguyen
  • We were STAs
  • STA Presentation
    • STA Presentation 2017
    • STA Presentation 2016
  • Testimonials
  • Resources
  • Home

STA Blog

eLucy Responsiveness

July 17, 2020 By

The current responsiveness of eLucy was somewhat there when I started working on it, but things were generally unaligned, and boxes where justified wrong with each other, along with uneven spacing or widths. A fair amount of work was put into equalizing these things.

Another aspect I had to implement for eLucy mobile responsiveness was the mobile’s hamburger menu. It existed, but no logic attached to it to actually work. Not sure how that actually happened, but I luckily the styling and HTML placement of the desktop navigation area wasn’t difficult to work with. I modified the style in mobile to that of a dropdown, and added some JavaScript logic to connect it to the button. Because the navigation bar is always visible in desktop but not in mobile, I also added logic when switching between mobile and desktop view (which happens when resizing window on a computer). However, I still need to catch an edge case, making mobile’s pulldown invisible on pageload.

http://sta.laits.utexas.edu/wp-content/uploads/2020/07/2020-07-17-12-54-46.mp4

Filed Under: 2019 Fall-Winter | Spring-Summer 2020

link to LAITS home page

Video STA Home

© 2021 Liberal Arts Instructional Technology Services | Production Credits