This is the repository for my Junior Design project. My team developed an interactive web application for children to read the story Dr. Dolittle while improving comprehension skills through quizzes and audio.
Make changes to all of the CSS files for the web pages to work on phone screens
Tested with the phone options on Chrome
The variables that I choose for the phone screen (max-width: 1000px)
For the iphone se, the ratio of the dimensions are different than the other phone screen, so some object looked different for that specific phone screen, to account for this I also included this variable (max-aspect-ratio: 4/2)
Each change that I made has a comment above it that includes (phone screen)
Overview of the changes made:
chapter-select-style:
None
gallery-style:
decreased size of text and image
modal-style:
increased size of definition screen
increased size of quiz button and sub buttons
decreased margin between word and definition
changed location of close button
quiz-style:
made drop shadow smaller
reading-style:
made audio bar smaller
review-style:
decreased the border sizes
style:
made elements in bookmark smaller
shifted bookmark to the right
Make changes to all of the CSS files for the web pages to work on phone screens Tested with the phone options on Chrome The variables that I choose for the phone screen (max-width: 1000px) For the iphone se, the ratio of the dimensions are different than the other phone screen, so some object looked different for that specific phone screen, to account for this I also included this variable (max-aspect-ratio: 4/2) Each change that I made has a comment above it that includes (phone screen)
Overview of the changes made: chapter-select-style: None
gallery-style: decreased size of text and image
modal-style: increased size of definition screen increased size of quiz button and sub buttons decreased margin between word and definition changed location of close button
quiz-style: made drop shadow smaller
reading-style: made audio bar smaller
review-style: decreased the border sizes
style: made elements in bookmark smaller shifted bookmark to the right