From dc1835c6c8c9e657bc022dbf7bc802c7b1922aa3 Mon Sep 17 00:00:00 2001
From: Steven H Johnson <shjohnson.pi@gmail.com>
Date: Wed, 15 Jun 2016 19:44:43 -0400
Subject: [PATCH] Workaround safari bug with min-width and flex
---
static/css/sass/_content_sponsors.scss | 11 +++--------
static/css/usta.css | 17 +++++++----------
2 files changed, 10 insertions(+), 18 deletions(-)
diff --git a/static/css/sass/_content_sponsors.scss b/static/css/sass/_content_sponsors.scss
index 915bea5..f8ce31a 100644
--- a/static/css/sass/_content_sponsors.scss
+++ b/static/css/sass/_content_sponsors.scss
@@ -42,11 +42,6 @@
@include justify-content(center); // Main axis alignment.
@include align-items(center); // Cross axis alignment.
@include flex-grow(1);
- @include flex-basis(100px);
-
- @media (min-width: $laptop-min) {
- @include flex-basis(150px);
- }
}
a {
@@ -103,7 +98,7 @@
@media (min-width: $phone-mid) and (max-width: $phone-max) {
max-height: 125px;
- min-width: 40%;
+ @include flex-basis(40%);
margin-top: 10px;
margin-right: 2%;
margin-bottom: 10px;
@@ -112,7 +107,7 @@
@media (min-width: $phone-max) and (max-width: $laptop-min) {
max-height: 150px;
- min-width: 25%;
+ @include flex-basis(25%);
margin-top: 15px;
margin-right: 2%;
margin-bottom: 15px;
@@ -121,7 +116,7 @@
@media (min-width: $laptop-min) {
max-height: 200px;
- min-width: 20%;
+ @include flex-basis(20%);
min-height: 100px;
margin-top: 15px;
margin-right: 2%;
diff --git a/static/css/usta.css b/static/css/usta.css
index cd535cb..dc5b2ba 100644
--- a/static/css/usta.css
+++ b/static/css/usta.css
@@ -2485,13 +2485,7 @@ nav img {
-webkit-align-items: center;
align-items: center;
-webkit-flex-grow: 1;
- flex-grow: 1;
- -webkit-flex-basis: 100px;
- flex-basis: 100px; }
- @media (min-width: 1024px) {
- .company-list li {
- -webkit-flex-basis: 150px;
- flex-basis: 150px; } }
+ flex-grow: 1; }
.company-list a {
display: -webkit-flex;
display: flex;
@@ -2527,7 +2521,8 @@ nav img {
@media (min-width: 550px) and (max-width: 767px) {
.company-list li {
max-height: 125px;
- min-width: 40%;
+ -webkit-flex-basis: 40%;
+ flex-basis: 40%;
margin-top: 10px;
margin-right: 2%;
margin-bottom: 10px;
@@ -2535,7 +2530,8 @@ nav img {
@media (min-width: 767px) and (max-width: 1024px) {
.company-list li {
max-height: 150px;
- min-width: 25%;
+ -webkit-flex-basis: 25%;
+ flex-basis: 25%;
margin-top: 15px;
margin-right: 2%;
margin-bottom: 15px;
@@ -2543,7 +2539,8 @@ nav img {
@media (min-width: 1024px) {
.company-list li {
max-height: 200px;
- min-width: 20%;
+ -webkit-flex-basis: 20%;
+ flex-basis: 20%;
min-height: 100px;
margin-top: 15px;
margin-right: 2%;
--
GitLab