There are a few technical issues so far with the app that I am trying to figure out how to fix.
The first one that’s really irritating happens when you click on the page itself. When you click, an extra vertical scrollbar appears, and when you click again, it disappears. It also moves the footer to the very bottom. It also happens when you resize the browser to the smallest possible width (mobile browser size).
Before clicking After clicking
I’ve tried figuring out how to fix this. I tried stuff like overflow-y: hidden, but that didn’t work. Not really sure how to get rid of this.
Another issue is that I can’t get the audio player to align in the center of the page. Again, I tried lots of different things like margin and padding but it just won’t budge.
Audio player is stuck to the left
Another issue is the descriptions of the exercises are cut off when the browser is at it’s smallest size. The text doesn’t fit the width on the listview (including the headers) unlike normal pages, where it aligns and fits according to the browser size. I tried using br tags but it still doesn’t fully fix the problem. Another problem you can see in the image below is that the icons are overlapping onto other li elements – another thing I have to fix.
Text is cutting off & icon is overlapping
I need to get these issues sorted ASAP. Just need to figure out how to actually fix them…!