Skip to content

Commit c8a2901

Browse files
4lb4lb
committed
rwd fixes, trusted by section animated on mobiles
1 parent 0608fc8 commit c8a2901

File tree

8 files changed

+339
-185
lines changed

8 files changed

+339
-185
lines changed

‎src/components/AstroButton.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ if (link?.preload) {
4444
.astro-btn {
4545
background-color: transparent;
4646
box-sizing: border-box;
47-
padding: 24px 64px;
47+
padding: 20px 48px;
4848
display: flex;
4949
flex-flow: row;
5050
align-items: center;

‎src/components/FlexibleSection.astro‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,6 @@ const {
114114
flex-direction: column;
115115
width: 100%;
116116
gap: 2rem;
117-
align-items: flex-start;
118117

119118
@media (min-width: 768px) {
120119
flex-direction: row;
@@ -123,14 +122,34 @@ const {
123122

124123
.column {
125124
width: 100%;
125+
display: flex;
126+
flex-direction: column;
126127

127128
@media (min-width: 768px) {
128-
flex: 1;
129+
width: calc(50% - 1rem); // explicit width calculation
129130
}
130131

131132
&.left-column, &.right-column {
132133
display: flex;
133134
flex-direction: column;
135+
136+
// Container elements with images
137+
> div, > p {
138+
width: 100%;
139+
140+
img {
141+
width: 100%;
142+
height: auto !important; // Force auto height
143+
display: block;
144+
}
145+
}
146+
147+
// Direct image children
148+
> img {
149+
width: 100%;
150+
height: auto !important; // Force auto height
151+
display: block;
152+
}
134153
}
135154
}
136155
}

‎src/layouts/BaseLayout.astro‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const { url, title, description, featuredImage, imageWidth, imageHeight } = Astr
2525
<html lang="en" data-theme="light">
2626
<head>
2727
<meta charset="UTF-8" />
28-
<meta name="viewport" content="width=device-width" />
28+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
2929
<meta name="generator" content={Astro.generator} />
3030
<title>defguard - Zero-Trust WireGuard® 2FA/MFA VPN</title>
3131
<meta property="og:title" content={title} />
@@ -64,8 +64,59 @@ const { url, title, description, featuredImage, imageWidth, imageHeight } = Astr
6464
</html>
6565

6666
<style lang="scss" is:global>
67+
html {
68+
width: 100%;
69+
max-width: 100%;
70+
overflow-x: hidden;
71+
box-sizing: border-box;
72+
/* Force proper width calculation */
73+
position: relative;
74+
/* Critical fix for the problematic range */
75+
@media (min-width: 768px) and (max-width: 991px) {
76+
overflow-x: clip;
77+
width: 100vw;
78+
}
79+
}
80+
81+
body {
82+
width: 100%;
83+
max-width: 100%;
84+
overflow-x: hidden;
85+
position: relative;
86+
margin: 0;
87+
padding: 0;
88+
/* Fix for mobile width issues */
89+
@media screen and (max-width: 991px) {
90+
width: 100vw;
91+
min-width: 100%;
92+
max-width: 100vw;
93+
}
94+
}
95+
96+
*, *::before, *::after {
97+
box-sizing: border-box;
98+
max-width: 100%;
99+
}
100+
101+
/* Set defaults for all containers */
102+
div, section, article, aside, nav, header, footer {
103+
max-width: 100%;
104+
box-sizing: border-box;
105+
}
106+
67107
main {
68108
--page-spacing-factor: 0.5;
109+
width: 100%;
110+
max-width: 100%;
111+
overflow-x: hidden;
112+
position: relative;
113+
114+
/* Ensure proper mobile rendering */
115+
@media screen and (max-width: 991px) {
116+
width: 100vw;
117+
max-width: 100vw;
118+
}
119+
69120
@include break-up(lg) {
70121
--page-spacing-factor: 1;
71122
}

‎src/layouts/ProductLayout.astro‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,20 +140,30 @@ const description =
140140

141141
.image-with-title {
142142
width: 100%;
143+
max-width: 100%;
144+
box-sizing: border-box;
143145
display: grid;
144146
align-items: center;
145147
justify-content: center;
146148
column-gap: 25px;
147149
row-gap: 50px;
150+
overflow-x: clip;
148151

149152
grid-template-columns: 1fr;
153+
154+
/* Ensure grid stays within container on all screen sizes */
155+
@media (min-width: 768px) and (max-width: 991px) {
156+
column-gap: 15px;
157+
}
150158

151159
@include break-up(lg) {
152-
grid-template-columns: 2.4fr 3.5fr;
160+
grid-template-columns: minmax(0, 2.4fr) minmax(0, 3.5fr);
153161
}
154162

155163
& > * {
156164
width: 100%;
165+
max-width: 100%;
166+
box-sizing: border-box;
157167
}
158168

159169
.description {
@@ -186,12 +196,14 @@ const description =
186196
.image-container {
187197
display: flex;
188198
width: 100%;
199+
max-width: 100%;
189200
height: 100%;
190201
content: " ";
191202
border: 0 solid transparent;
192203
box-shadow: var(--box-shadow);
193204
border-radius: 8px;
194205
overflow: hidden;
206+
box-sizing: border-box;
195207

196208
img {
197209
width: 100%;

‎src/layouts/ProductSection.astro‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -48,45 +48,62 @@ const theme = dark ? "dark" : "light";
4848

4949
box-sizing: border-box;
5050
width: 100%;
51-
max-width: 100vw;
52-
overflow-x: hidden;
53-
display: flex;
54-
flex-flow: column;
55-
align-items: center;
56-
justify-content: flex-start;
51+
margin: 0;
52+
display: grid;
53+
grid-template-columns:
54+
[full-start] minmax(var(--product-section-edge-padding), 1fr)
55+
[main-start] minmax(0, 1100px)
56+
[main-end] minmax(var(--product-section-edge-padding), 1fr)
57+
[full-end];
5758
background-color: var(--surface-frame-bg);
58-
59-
@include break-down(sm) {
60-
--product-section-edge-padding: 10px;
59+
60+
/* Content container with grid-based layout */
61+
&:not(.skip-max) > * {
62+
grid-column: main-start / main-end;
63+
width: 100%;
64+
box-sizing: border-box;
65+
66+
@media (max-width: 1199px) {
67+
max-width: 950px;
68+
margin: 0 auto;
69+
}
70+
}
71+
72+
/* Responsive adjustments */
73+
@media (max-width: 991px) {
74+
--product-section-padding-large: 100px;
75+
--product-section-padding-mid: 80px;
6176
}
6277

63-
&:not(.skip-max) {
64-
& > * {
65-
width: 100%;
66-
max-width: var(--max-section-width);
67-
box-sizing: border-box;
68-
}
78+
@media (max-width: 576px) {
79+
--product-section-padding-large: 60px;
80+
--product-section-padding-mid: 40px;
6981
}
7082

83+
/* Vertical padding variants */
7184
&.padding-large {
72-
padding: var(--product-section-padding-large) var(--product-section-edge-padding);
85+
padding-top: var(--product-section-padding-large);
86+
padding-bottom: var(--product-section-padding-large);
7387
}
7488

7589
&.padding-mid {
76-
padding: var(--product-section-padding-mid) var(--product-section-edge-padding);
90+
padding-top: var(--product-section-padding-mid);
91+
padding-bottom: var(--product-section-padding-mid);
7792
}
7893

7994
&.padding-small {
80-
padding: var(--product-section-padding-small) var(--product-section-edge-padding);
95+
padding-top: var(--product-section-padding-small);
96+
padding-bottom: var(--product-section-padding-small);
8197
}
8298

8399
&.padding-none {
84-
padding: 0 var(--product-section-edge-padding);
100+
padding-top: 0;
101+
padding-bottom: 0;
85102
}
86103

87104
&.padding-newsletter {
88-
padding: var(--product-section-padding-newsletter)
89-
var(--product-section-edge-padding);
105+
padding-top: var(--product-section-padding-newsletter);
106+
padding-bottom: var(--product-section-padding-newsletter);
90107
}
91108

92109
&.bordered {

0 commit comments

Comments
 (0)