This is an automated email from the ASF dual-hosted git repository.
dahn pushed a commit to branch staging-site
in repository https://gitbox.apache.org/repos/asf/cloudstack-www.git
The following commit(s) were added to refs/heads/staging-site by this push:
new 816dc74bb mobile column (#346)
816dc74bb is described below
commit 816dc74bbeaec7c6b59ffc3966b7adba4f0bc1d8
Author: dahn <[email protected]>
AuthorDate: Mon Jul 21 13:33:18 2025 +0200
mobile column (#346)
Co-authored-by: Daan Hoogland <[email protected]>
---
src/css/custom.css | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++--
src/pages/index.tsx | 2 +-
2 files changed, 73 insertions(+), 3 deletions(-)
diff --git a/src/css/custom.css b/src/css/custom.css
index a75ff6e3d..0eb76de8d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -207,7 +207,7 @@ h1 {
margin-bottom: 20px;
}
.power-card.line {
- position: relative;
+ position: relative;
}
.power-card.line::before {
position: absolute;
@@ -232,6 +232,75 @@ h1 {
min-height: 120px;
}
+/* Powers section mobile optimizations */
+@media only screen and (max-width: 768px) {
+ .powers {
+ padding-top: 1rem !important;
+ padding-bottom: 1rem !important;
+ background: none !important;
+ }
+
+ .powers .row {
+ margin-left: -0.5rem;
+ margin-right: -0.5rem;
+ }
+
+ .powers .col-lg-4,
+ .powers .col-md-6 {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .powers .col-lg-4:last-child,
+ .powers .col-md-6:last-child {
+ margin-bottom: 0;
+ }
+
+ .powers .power-card {
+ background-color: transparent !important;
+ margin-bottom: 0.5rem !important;
+ padding: 1rem !important;
+ }
+
+ .powers .power-card .card-text {
+ min-height: auto !important;
+ margin-bottom: 0.75rem !important;
+ }
+}
+
+/* Powers section small mobile optimizations */
+@media only screen and (max-width: 576px) {
+ .powers {
+ padding-top: 0.5rem !important;
+ padding-bottom: 0.5rem !important;
+ background: none !important;
+ }
+
+ .powers .row {
+ margin-left: -0.25rem;
+ margin-right: -0.25rem;
+ }
+
+ .powers .col-lg-4,
+ .powers .col-md-6 {
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+ margin-bottom: 0.25rem;
+ }
+
+ .powers .power-card {
+ background-color: transparent !important;
+ margin-bottom: 0.25rem !important;
+ padding: 0.75rem !important;
+ }
+
+ .powers .power-card .card-text {
+ min-height: auto !important;
+ margin-bottom: 0.5rem !important;
+ }
+}
+
/* solves */
.dark-blue {
background-color: #082330;
@@ -1236,7 +1305,8 @@ progress{vertical-align:baseline}
@media (min-width:576px){
.container,.container-sm{
- max-width:540px}
+ max-width:540px;
+ }
}
@media (min-width:768px){
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 627dce9eb..354ec6d6c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -136,7 +136,7 @@ computing</strong> capabilities with Edge zones.
</div>
</div>
<div className="col-lg-4 col-md-6">
- <div className="power-card">
+ <div className="power-card line">
<img src="/img/enterprises_icon.svg" alt=""/>
<p className="card-title mb-3">Enterprises</p>
<p className="card-text">
