hawk / commit
Style changes to make the page look better on mobile.
public/index.html | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index e866593..3670d07 100644 --- a/public/index.html +++ b/public/index.html @@ -33,10 +33,7 @@ #minutes-input, #seconds-input { width: 3em; - margin-left: 0.5em; - margin-right: 0.5em; padding: 0.5em; - } div { @@ -49,6 +46,14 @@ margin-top: 1em; text-align: center; } + + /* media query for screens smaller than 600px */ + @media (max-width: 600px) { + body { + font-size: 16px; + /* increase the font size */ + } + } </style> </head> @@ -58,6 +63,8 @@ <div> <span>${name}</span> <span>${duration}</span> + </div> + <div> <button id="play-${trackId}" onclick="playTrack('${trackId}')">Play</button> <button id="open-${trackId}" onclick="window.open('${trackHref}')">Open</button> </div> @@ -86,11 +93,11 @@ <div id="greeting"></div> <span id="minutes"> <input id="minutes-input" type="number" min="0" max="59" value="5" /> - <label for="minutes-input">minutes</label> + <label for="minutes-input">min</label> </span> <span id="seconds"> <input id="seconds-input" type="number" min="0" max="59" value="32" /> - <label for="seconds-input">seconds</label> + <label for="seconds-input">sec</label> </span> <button id="search">Search</button>