Conditionally add top padding to Android addons icons #1129

2019-08-10T05:34:54Z

nitrohorse commented

2019-08-10 05:34:54 +00:00

(Migrated from github.com)

Description

This PR hopefully increases the UX on the Android Addons page by adding 50 pixels of top padding to the icons conditionally (using a media query) on the "large" Bootstrap layout until the layout collapses for smaller screens.

Before

After

Not modified (small screen layout)

Check List

I have read and understand CONTRIBUTING.md.
~~I have listed the source code for this project in source_code.md.~~
~~This project is free/libre software.~~
~~This project has an associated discussion.~~

Code Repository (if applicable): N/A

## Description This PR hopefully increases the UX on the [Android Addons page](https://www.privacytools.io/operating-systems/#aaddons) by adding 50 pixels of top padding to the icons conditionally (using a [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)) on the "large" Bootstrap layout until the layout collapses for smaller screens. ### Before ![addons-before](https://user-images.githubusercontent.com/1514352/62818026-398ee080-bb30-11e9-94d8-7a66eaeef54e.png) ### After ![addons-after](https://user-images.githubusercontent.com/1514352/62818028-3dbafe00-bb30-11e9-8586-e4826d78ff38.png) ### Not modified (small screen layout) ![addons-sm](https://user-images.githubusercontent.com/1514352/62818034-778c0480-bb30-11e9-8d12-c85bdf34aae9.png) #### Check List  - [x] I have read and understand [CONTRIBUTING.md](https://github.com/privacytoolsIO/privacytools.io/blob/master/.github/CONTRIBUTING.md). - ~~[ ] I have listed the source code for this project in [source_code.md](https://github.com/privacytoolsIO/privacytools.io/blob/master/source_code.md).~~ - ~~[ ] This project is [free/libre software](https://www.wikipedia.org/wiki/Free_software).~~ - ~~[ ] This project has an [associated discussion](https://github.com/privacytoolsIO/privacytools.io/issues).~~ Code Repository (if applicable): N/A

netlify[bot] commented

2019-08-10 05:35:34 +00:00

(Migrated from github.com)

Deploy preview for privacytools-io ready!

Built with commit f5902f9993

https://deploy-preview-1129--privacytools-io.netlify.com

Deploy preview for *privacytools-io* ready! Built with commit f5902f9993497fa4cc2c51883275e8218ce5ceb9 https://deploy-preview-1129--privacytools-io.netlify.com

dawidpotocki commented

2019-08-10 07:56:18 +00:00

(Migrated from github.com)

Why are you making your own CSS class? No need for that, you can use utility classes from Bootstrap, like, pt-lg-5.

EDIT: Btw cleaner solution would be using flexbox instead of XYZ padding.

Why are you making your own CSS class? No need for that, you can use utility classes from Bootstrap, like, `pt-lg-5`. EDIT: Btw cleaner solution would be using flexbox instead of XYZ padding.

😆 1

nitrohorse commented

2019-08-10 18:18:06 +00:00

(Migrated from github.com)

Why are you making your own CSS class? No need for that, you can use utility classes from Bootstrap, like, pt-lg-5.

EDIT: Btw cleaner solution would be using flexbox instead of XYZ padding.

Oh TIL! I'm not really familiar with Bootstrap or flexbox but will look into that instead.

[edit] Updated to use pt-lg-5! Wow, that works great 👀

> Why are you making your own CSS class? No need for that, you can use utility classes from Bootstrap, like, `pt-lg-5`. > > EDIT: Btw cleaner solution would be using flexbox instead of XYZ padding. Oh TIL! I'm not really familiar with Bootstrap or flexbox but will look into that instead. [edit] Updated to use `pt-lg-5`! Wow, that works great :eyes:

blacklight447 (Migrated from github.com) reviewed 2019-08-10 18:19:59 +00:00

blacklight447 (Migrated from github.com) left a comment

seems good for merching.