diff --git a/src/components/Site/Site.scss b/src/components/Site/Site.scss
index 395e4a9a9996..f278b6d453c2 100644
--- a/src/components/Site/Site.scss
+++ b/src/components/Site/Site.scss
@@ -14,7 +14,18 @@
flex: 1 1 auto;
position: relative;
display: flex;
- margin-top: 110px;
+
+ @media (min-width: 1525px) {
+ margin-top: 110px;
+ }
+
+ @media (max-width: 1524px) {
+ margin-top: 350px;
+ }
+
+ @media (max-width: 641px) {
+ margin-top: 350px;
+ }
@media print {
margin-top: 0px;
diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
index a98f292237eb..e980f963f36b 100644
--- a/src/components/Sponsors/Sponsors.jsx
+++ b/src/components/Sponsors/Sponsors.jsx
@@ -8,27 +8,27 @@ const Sponsors = () => {
return (
<div className="sponsors">
<div className="sponsors__content">
- <div className="sponsors__link-wrapper">
- <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
- <img
- className="agGridLogo"
- src={AGLogo}
- alt="ag grid"
- width={220}
- loading="lazy"
- />
- </Link>
- </div>
- <div className="sponsors__link-wrapper">
- <Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
- <img
- className="agChartsLogo"
- src={AGChartsLogo}
- alt="ag charts"
- width={220}
- loading="lazy"
- />
- </Link>
+ <div className="sponsors__buttons__wrapper">
+ <div className="sponsors__link-wrapper">
+ <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
+ <img
+ className="agGridLogo"
+ src={AGLogo}
+ alt="ag grid"
+ loading="lazy"
+ />
+ </Link>
+ </div>
+ <div className="sponsors__link-wrapper">
+ <Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
+ <img
+ className="agChartsLogo"
+ src={AGChartsLogo}
+ alt="ag charts"
+ loading="lazy"
+ />
+ </Link>
+ </div>
</div>
<div className="sponsors__link-wrapper-2">
<Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
diff --git a/src/components/Sponsors/Sponsors.scss b/src/components/Sponsors/Sponsors.scss
index a096325f29c2..6aaabbbe9d6a 100644
--- a/src/components/Sponsors/Sponsors.scss
+++ b/src/components/Sponsors/Sponsors.scss
@@ -10,6 +10,8 @@ $link-wrapper-radius: 8px;
$link-wrapper-margin: 8px;
$tagline-font-size: 2em;
$footer-font-size: 1.7em;
+$tagline-font-size-mobile: 1.4em;
+$footer-font-size-mobile: 1.2em;
[data-theme='dark'] {
.agGridLogo {
@@ -48,57 +50,191 @@ $footer-font-size: 1.7em;
}
}
-.sponsors {
- position: absolute;
- height: 100%;
- width: 250px;
- margin-left: -250px;
- margin-right: 8px;
-
- &__link-wrapper {
- box-shadow: $link-wrapper-shadow;
- border-radius: $link-wrapper-radius;
- margin: $link-wrapper-margin;
- transition: transform 0.2s;
- &:hover {
- background-color: getColor(concrete);
- transform: scale(1.05);
- }
+@media (max-width: 642px) {
+ .agGridLogo {
+ height: 50px;
}
- &__tagline,
- &__footer {
- margin: 1rem 0;
- text-align: center;
- color: $sponsor-text-color-light;
+
+ .agChartsLogo {
+ height: 50px;
}
- &__tagline {
- font-size: $tagline-font-size;
+
+ .sponsors {
+ position: absolute;
+ height: auto;
+ width: 100%;
+ margin-top: -275px;
+
+ &__link-wrapper {
+ box-shadow: $link-wrapper-shadow;
+ border-radius: $link-wrapper-radius;
+ margin: $link-wrapper-margin;
+ transition: transform 0.2s;
+ &:hover {
+ background-color: getColor(concrete);
+ transform: scale(1.05);
+ }
+ }
+ &__tagline,
+ &__footer {
+ margin: 1rem 0;
+ text-align: center;
+ color: $sponsor-text-color-light;
+ }
+ &__tagline {
+ font-size: $tagline-font-size-mobile;
+ }
+ &__footer {
+ font-size: $footer-font-size-mobile;
+ font-style: italic;
+ }
+ &__content {
+ position: sticky;
+ display: flex;
+ margin: 1.5em 0;
+ top: 6em;
+ padding-bottom: 16px;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: flex-start;
+ overflow: hidden;
+ transition: background-color 250ms;
+ }
+ &__img {
+ &__wrapper {
+ display: none;
+ }
+ }
+ }
+}
+
+@media (min-width: 642px) and (max-width: 1524px) {
+ .agGridLogo {
+ height: 50px;
}
- &__footer {
- font-size: $footer-font-size;
- font-style: italic;
+
+ .agChartsLogo {
+ height: 50px;
}
- &__content {
- position: sticky;
- display: none;
- margin: 1.5em 0;
- top: 6em;
- padding: 0 1.5em 3em;
- flex-wrap: wrap;
- justify-content: center;
- align-items: flex-start;
- border-right: 2px solid getColor(concrete);
- overflow: hidden;
- transition: background-color 250ms;
- @include break(xlarge) {
+
+ .sponsors {
+ position: absolute;
+ height: auto;
+ width: 100%;
+ margin-top: -240px;
+
+ &__buttons__wrapper {
display: flex;
+ width: 100%;
+ flex-direction: row;
+ justify-content: center;
+ }
+ &__link-wrapper {
+ box-shadow: $link-wrapper-shadow;
+ border-radius: $link-wrapper-radius;
+ margin: $link-wrapper-margin;
+ transition: transform 0.2s;
+ &:hover {
+ background-color: getColor(concrete);
+ transform: scale(1.05);
+ }
}
+ &__tagline,
+ &__footer {
+ margin: 1rem 0;
+ text-align: center;
+ color: $sponsor-text-color-light;
+ }
+ &__tagline {
+ font-size: $tagline-font-size-mobile;
+ }
+ &__footer {
+ font-size: $footer-font-size-mobile;
+ font-style: italic;
+ }
+ &__content {
+ position: sticky;
+ display: flex;
+ flex-direction: column;
+ margin: 1.5em 0;
+ top: 6em;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ border-bottom: 2px solid getColor(concrete);
+ overflow: hidden;
+ transition: background-color 250ms;
+ padding-bottom: 32px;
+ }
+ &__img {
+ background: red !important;
+ &__wrapper {
+ display: none;
+ }
+ }
+ }
+}
+
+@media (min-width: 1525px) {
+ .agGridLogo {
+ max-width: 220px;
+ height: auto;
+ }
+
+ .agChartsLogo {
+ max-width: 220px;
+ height: auto;
}
- &__img {
- &__wrapper {
+
+ .sponsors {
+ position: absolute;
+ height: 100%;
+ width: 250px;
+ margin-left: -250px;
+ margin-right: 8px;
+
+ &__link-wrapper {
+ box-shadow: $link-wrapper-shadow;
+ border-radius: $link-wrapper-radius;
+ margin: $link-wrapper-margin;
+ transition: transform 0.2s;
+ &:hover {
+ background-color: getColor(concrete);
+ transform: scale(1.05);
+ }
+ }
+ &__tagline,
+ &__footer {
+ margin: 1rem 0;
+ text-align: center;
+ color: $sponsor-text-color-light;
+ }
+ &__tagline {
+ font-size: $tagline-font-size;
+ }
+ &__footer {
+ font-size: $footer-font-size;
+ font-style: italic;
+ }
+ &__content {
+ position: sticky;
display: flex;
+ margin: 1.5em 0;
+ top: 6em;
+ padding: 0 1.5em 3em;
+ flex-wrap: wrap;
justify-content: center;
- width: 100%;
+ align-items: flex-start;
+ border-right: 2px solid getColor(concrete);
+ overflow: hidden;
+ transition: background-color 250ms;
+ }
+ &__img {
+ &__wrapper {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ }
}
}
}