Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 6a178df

Browse files
N6REJN6REJ
committed
Standardize CSS formatting with consistent indentation and improve mobile responsiveness
1 parent b6b3fd3 commit 6a178df

File tree

2 files changed

+82
-37
lines changed

2 files changed

+82
-37
lines changed

‎css/1265.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
--bears-title-color: #fff;
3838
--bears-price-color: #515151;
3939
--bears-subtitle-color: var(--bears-price-color);
40-
--bears-features-text-color: #6F6F6F;
40+
--bears-features-text-color: #6f6f6f;
4141
--bears-button-text-color: #fff;
4242

4343
/* Colors - Featured Elements */
@@ -48,9 +48,9 @@
4848
--bears-featured-features-text-color: #6f6f6f;
4949

5050
/* Colors - Buttons */
51-
--bears-button-background-color: #F39C12;
51+
--bears-button-background-color: #f39c12;
5252
--bears-button-hover-color: #555555;
53-
--bears-featured-button-background: #F39C12;
53+
--bears-featured-button-background: #f39c12;
5454
--bears-featured-button-text-color: #fff;
5555

5656
/* Borders - Standard */
@@ -78,12 +78,12 @@
7878
--bears-featured-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
7979

8080
/* Icons */
81-
--bears-header-icon-color: #F39C12;
82-
--bears-featured-header-icon-color: #F39C12;
81+
--bears-header-icon-color: #f39c12;
82+
--bears-featured-header-icon-color: #f39c12;
8383
--bears-features-icon-color: var(--bears-features-text-color);
8484
--bears-featured-features-icon-color: var(--bears-featured-features-text-color);
8585
--bears-header-icon-size: 3.5rem;
86-
}
86+
}
8787

8888
/* Template-specific styles */
8989
.template-1265 .bears_pricing_tables .price {
@@ -161,7 +161,7 @@
161161
.template-1265 .bears_pricing_tables .plan-select,
162162
.template-1265 .bears_pricing_tables .plan.featured .plan-select {
163163
border-top: 1px solid rgba(255, 255, 255, 0.1);
164-
background: #1E1E1E;
164+
background: #1e1e1e;
165165
}
166166

167167
.template-1265 .bears_pricing_tables .plan-select a:hover {
@@ -271,9 +271,9 @@
271271
@media (max-width: 768px) {
272272
.template-1265 .bears_pricing_tables .price {
273273
grid-template-columns: auto 1fr auto;
274-
}
274+
}
275275

276276
.template-1265 .bears_pricing_tables .plan-title {
277277
font-size: 1.2rem;
278+
}
278279
}
279-
}

‎css/column-widths.css‎

Lines changed: 73 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
display: block; /* Ensure it's a block element */
2121
clear: both; /* Clear any floats */
2222
overflow: hidden; /* Prevent overflow issues */
23-
}
23+
}
2424

2525
.bears_pricing_tables-container {
2626
display: flex;
@@ -37,12 +37,12 @@
3737
gap: var(--bears-column-margin-x);
3838
/* Ensure the container takes full width */
3939
max-width: 100%;
40-
}
40+
}
4141

4242
/* Ensure box-sizing includes borders */
4343
.bears_pricing_tables * {
4444
box-sizing: border-box;
45-
}
45+
}
4646

4747
/* Base column styles - applies to all templates */
4848
.bears_pricing_tables {
@@ -57,40 +57,40 @@
5757
/* Changed from flex: 0 1 auto to flex: 1 1 0% to make columns expand */
5858
flex: 1 1 0%;
5959
min-width: 0; /* Prevent flex items from overflowing */
60-
}
60+
}
6161

6262
/* Generic column width settings - will apply to any template */
6363
/* Modified to use flex-basis instead of fixed calculations when using space-between */
6464
.bears_pricing_tables-container[data-columns="1"] .bears_pricing_tables {
6565
flex: 1 1 100%;
6666
max-width: 100%;
67-
}
67+
}
6868

6969
.bears_pricing_tables-container[data-columns="2"] .bears_pricing_tables {
7070
flex: 1 1 0%; /* Changed to allow growth */
7171
/* Set a min-width instead of fixed width to allow expansion */
7272
min-width: calc((100% - var(--bears-column-margin-x)) / 2);
7373
/* Keep max-width to prevent overflow on small screens */
7474
max-width: calc(50% - (var(--bears-column-margin-x) / 2));
75-
}
75+
}
7676

7777
.bears_pricing_tables-container[data-columns="3"] .bears_pricing_tables {
7878
flex: 1 1 0%; /* Changed to allow growth */
7979
min-width: calc((100% - 2 * var(--bears-column-margin-x)) / 3);
8080
max-width: calc(33.333% - (var(--bears-column-margin-x) * 2 / 3));
81-
}
81+
}
8282

8383
.bears_pricing_tables-container[data-columns="4"] .bears_pricing_tables {
8484
flex: 1 1 0%; /* Changed to allow growth */
8585
min-width: calc((100% - 3 * var(--bears-column-margin-x)) / 4);
8686
max-width: calc(25% - (var(--bears-column-margin-x) * 3 / 4));
87-
}
87+
}
8888

8989
.bears_pricing_tables-container[data-columns="5"] .bears_pricing_tables {
9090
flex: 1 1 0%; /* Changed to allow growth */
9191
min-width: calc((100% - 4 * var(--bears-column-margin-x)) / 5);
9292
max-width: calc(20% - (var(--bears-column-margin-x) * 4 / 5));
93-
}
93+
}
9494

9595
/* Fix for border gap in header corners - applies to all templates */
9696
[class*="template-"] .bears_pricing_tables .plan {
@@ -105,7 +105,7 @@
105105
/* Fix for content overflow - ensure content stays within bounds */
106106
box-sizing: border-box;
107107
max-width: 100%;
108-
}
108+
}
109109

110110
[class*="template-"] .bears_pricing_tables header {
111111
/* Fix for the border gap - adjust border radius to only round the top */
@@ -116,7 +116,7 @@
116116
width: 100%;
117117
box-sizing: border-box;
118118
position: relative;
119-
}
119+
}
120120

121121
/* Apply the same fix to featured plans */
122122
[class*="template-"] .bears_pricing_tables .plan.featured header {
@@ -126,13 +126,13 @@
126126
margin-right: 0;
127127
width: 100%;
128128
border-radius: calc(var(--bears-border-radius) - var(--bears-border-width)) calc(var(--bears-border-radius) - var(--bears-border-width)) 0 0;
129-
}
129+
}
130130

131131
/* Ensure the header's after element (triangle) is positioned correctly */
132132
[class*="template-"] .bears_pricing_tables header:after {
133133
z-index: 1; /* Ensure the accent appears above any potential gaps */
134134
margin-bottom: 0; /* Remove any margin that might create a gap */
135-
}
135+
}
136136

137137
/* Fix for content overflow in columns */
138138
.bears_pricing_tables .plan {
@@ -142,14 +142,14 @@
142142
overflow: hidden; /* Prevent content from overflowing */
143143
/* Make sure plan content fills the column */
144144
flex: 1 1 auto;
145-
}
145+
}
146146

147147
/* Ensure content within the plan fills the available space */
148148
.bears_pricing_tables .plan-content {
149149
flex: 1 1 auto;
150150
display: flex;
151151
flex-direction: column;
152-
}
152+
}
153153

154154
/* Responsive styles for tablet */
155155
@media (max-width: 992px) and (min-width: 769px) {
@@ -158,43 +158,52 @@
158158
display: flex;
159159
flex-wrap: wrap;
160160
justify-content: space-between; /* Keep space-between for columns 1 and 2 */
161-
}
161+
}
162162

163163
/* Default 2-column layout for tablet view */
164164
.bears_pricing_tables-container[data-columns] .bears_pricing_tables {
165165
flex: 0 0 calc(50% - var(--bears-column-margin-x) / 2) !important;
166166
max-width: calc(50% - var(--bears-column-margin-x) / 2) !important;
167167
margin-bottom: var(--bears-column-margin-y);
168-
}
168+
}
169169

170170
/* Specific fix for 3-column layout */
171171
.bears_pricing_tables-container[data-columns="3"] {
172172
position: relative; /* For proper positioning of the third column */
173-
}
173+
}
174174

175175
/* First two columns in a 3-column layout */
176176
.bears_pricing_tables-container[data-columns="3"] .bears_pricing_tables:nth-child(1),
177177
.bears_pricing_tables-container[data-columns="3"] .bears_pricing_tables:nth-child(2) {
178178
flex: 0 0 calc(50% - var(--bears-column-margin-x) / 2) !important;
179179
max-width: calc(50% - var(--bears-column-margin-x) / 2) !important;
180180
margin-bottom: var(--bears-column-margin-y);
181-
}
181+
}
182182

183183
/* Third column in a 3-column layout */
184184
.bears_pricing_tables-container[data-columns="3"] .bears_pricing_tables:nth-child(3) {
185185
flex: 0 0 48% !important;
186186
max-width: 48% !important;
187187
margin: 0 auto;
188188
clear: both;
189-
}
189+
}
190190

191191
/* Fix for featured plans in tablet view */
192192
[class*="template-"] .bears_pricing_tables-container[data-columns="3"] .bears_pricing_tables:nth-child(3) .plan.featured {
193193
transform: none !important; /* Remove transform that causes overflow */
194194
margin: 0 auto !important; /* Center the plan */
195195
width: 100% !important; /* Full width within its column */
196+
}
197+
198+
.bears_pricing_tables .plan {
199+
margin-bottom: 1.0em !important;
200+
}
201+
}
202+
203+
.template-1214 .bears_pricing_tables .plan,
204+
.template-1223 .bears_pricing_tables .plan {
205+
margin-bottom: 2.5em !important;
196206
}
197-
}
198207

199208
/* Responsive styles for mobile */
200209
@media (max-width: 768px) {
@@ -203,26 +212,62 @@
203212
display: flex;
204213
flex-direction: column;
205214
align-items: center;
206-
}
215+
width: 100vw !important;
216+
max-width: 100vw !important;
217+
margin-left: 0 !important;
218+
margin-right: 0 !important;
219+
padding-left: 0 !important;
220+
padding-right: 0 !important;
221+
box-sizing: border-box !important;
222+
}
223+
224+
/* Ensure outer container is full viewport width */
225+
.bears_pricing_tables-outer {
226+
width: 100vw !important;
227+
max-width: 100vw !important;
228+
margin-left: 0 !important;
229+
margin-right: 0 !important;
230+
padding-left: 0 !important;
231+
padding-right: 0 !important;
232+
box-sizing: border-box !important;
233+
}
207234

208235
/* All columns in mobile view */
209236
.bears_pricing_tables-container[data-columns] .bears_pricing_tables {
210-
flex: 0 0 100% !important;
211-
max-width: 100% !important;
237+
flex: 0 0 100vw !important;
238+
width: 100vw !important;
239+
max-width: 100vw !important;
212240
padding-left: 0;
213241
padding-right: 0;
214242
margin-bottom: var(--bears-column-margin-y);
215-
}
243+
box-sizing: border-box !important;
244+
}
216245

217246
/* Add space between stacked columns on mobile */
218247
.bears_pricing_tables-container .bears_pricing_tables:not(:last-child) {
219248
margin-bottom: var(--bears-column-margin-y);
220-
}
249+
}
221250

222251
/* Fix for featured plans in mobile view - applies to all templates */
223252
[class*="template-"] .bears_pricing_tables .plan.featured {
224253
transform: none !important; /* Remove transform that causes overflow */
225254
margin: 0 auto !important; /* Center the plan */
226-
width: 100% !important; /* Full width within its column */
255+
width: 100vw !important; /* Full viewport width */
256+
max-width: 100vw !important;
257+
}
258+
259+
/* Ensure all plans take full viewport width */
260+
.bears_pricing_tables .plan {
261+
width: 100vw !important;
262+
max-width: 100vw !important;
263+
margin-bottom: 1.0em !important;
264+
box-sizing: border-box !important;
265+
}
266+
267+
.template-1214 .bears_pricing_tables .plan,
268+
.template-1223 .bears_pricing_tables .plan {
269+
margin-bottom: 2.5em !important;
270+
width: 100vw !important;
271+
max-width: 100vw !important;
272+
}
227273
}
228-
}

0 commit comments

Comments
 (0)