Improving buttons for smaller screens

[vibhorgupta-gh]

Please describe the problem (or idea)

What happened just before the problem occurred? Or what problem could this idea solve?

The buttons save sequence and view gif are too wide and have no margin at all in mobile and tablet views. They even flow out of the div, and hence out of the device screen. This is undesirable, buttons should change their shape according to the device.

What did you expect to see that you didn't?

Well-aligned and spaced buttons

Please show us where to look

http://sequencer.publiclab.org

This can help us diagnose the issue:

Observe the mobile/tablet view

Browser, version, and operating system

Chrome/Safari; OSX 10.13

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[welcome]

Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄
If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can make a gif too!

[gitmate]

GitMate.io thinks the contributors most likely able to help are @oorjitchowdhary, and @GitMate[bot].

Possibly related issues are #373 (Button to top), #348 (Improve Images step Ui), #346 (Include a back-to-top Button on scrolling down), #471 (Change Gif to GIF in 'View Gif' button.), and #569 (add toggle-able collapse button for modules ).

[gitmate]

GitMate.io thinks the contributors most likely able to help are @oorjitchowdhary, and @GitMate[bot].

Possibly related issues are #373 (Button to top), #348 (Improve Images step Ui), #346 (Include a back-to-top Button on scrolling down), #471 (Change Gif to GIF in 'View Gif' button.), and #569 (add toggle-able collapse button for modules ).

[jywarren]

Hmm, are they block buttons? Perhaps just normal `btn` class from Bootstrap would work better?

…

On Mon, Dec 31, 2018 at 4:14 PM gitmate[bot] ***@***.***> wrote: GitMate.io <https://gitmate.io> thinks the contributors most likely able to help are @oorjitchowdhary <https://github.com/oorjitchowdhary>, and @GitMate <https://github.com/GitMate>[bot]. Possibly related issues are #373 <#373> (Button to top), #348 <#348> (Improve Images step Ui), #346 <#346> (Include a back-to-top Button on scrolling down), #471 <#471> (Change Gif to GIF in 'View Gif' button.), and #569 <#569> (add toggle-able collapse button for modules ). — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#582 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ1Q4PJbhzq7iu5tXWFQ-RHJ3MadEks5u-n4TgaJpZM4ZlqSR> .

[vibhorgupta-gh]

@jywarren yes, this can be achieved using btn-block as well, but the white panel behind the two buttons doesn't adjust it's size, and additional css might be required there (which I haven't figured out yet). Example:

How would you suggest we proceed? Using btn-block gets the desired result without changing the size of the background panel though.

[vibhorgupta-gh]

@jywarren #583 however, takes care of the white panel background as well, which looks prettier IMO. Thoughts?

[jywarren]

OK, would you like to close this and solve over there? Thanks!

[vibhorgupta-gh]

@jywarren sure, I'll close this and update the PR :)