search

codeconnector / codeconnector.github.io

The Code Connector website
https://codeconnector.io/
17 stars 17 forks source link

On a mobile device, the facebook and twitter buttons do not have a margin to space the buttons #73

Closed mudiagauwojeya closed 3 years ago

mudiagauwojeya commented 3 years ago

Describe the bug In the contact section (Send word our way) there is a link to facebook and another link to twitter, which are styled as buttons. On a mobile device, however, these buttons are overlapping with no margin in between to space them. This behavior appears on every page where the contact section is featured.

To Reproduce Steps to reproduce the behavior:

  1. On a mobile device, go to https://codeconnector.io/ or any page there
  2. Scroll down to the 'contact' section "Send word our way" or simply click 'Contact' from the menu
  3. See error

Expected behavior The facebook button should be given a margin-bottom to push down the twitter button away from it.

Screenshots social-icons

Smartphone:

Solution Can be fixed by adding the bootstrap class mb-5 to the facebook button.

mudiagauwojeya commented 3 years ago

Solution: The solution suggested above works fine for the small screen but leave an undesirable behavior for the larger breakpoints. The margin-bottom disrupts the vertical alignment of the buttons. It made the facebook button have a height different from the twitter button because the margin-bottom is computed as part of the height of the facebook button. This is box-model related issue. The better thing to do, since using bootstrap is preferred to writing custom css, is to make the parent div of the buttons a flex container and give it column direction for small devices but row direction for larger devices. That will resolve the box model issue.

rjbeers commented 3 years ago

This was resolved in https://github.com/codeconnector/codeconnector.github.io/commit/d7358b421dbb585b3aad550a16c12cab89fa5130