Last active
February 28, 2020 04:43
-
-
Save kirandash/661683773a8a5286cb945f0a1df0d670 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 1. Display Flex not working on Safari */ | |
| .row { | |
| display: -ms-flexbox; | |
| display: flex; | |
| display: -webkit-box; | |
| } | |
| /* 2. Height Issue for Flex Items */ | |
| Don't use percentage heights for flex items or child. Use height auto. | |
| https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent | |
| /* 3. background-attachment: fixed iOS Safari issue */ | |
| .banner { | |
| background-attachment: fixed | |
| } | |
| will cause the image to scale huge on iOS device. To fix this overwrite CSS using: | |
| .banner { | |
| background-attachment: initial; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Full Width td when multiple th or tds are presetn --> | |
| <td className="text-center" colspan="7">This is full width td</td> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment