Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit f9fab08

Browse files
Sam HSam H
Sam H
authored and
Sam H
committed
fix: fix styling on services page
1 parent 6d9815b commit f9fab08

File tree

1 file changed

+127
-127
lines changed

1 file changed

+127
-127
lines changed

‎src/pages/app-detailed-service/app-detailed-service.scss‎

Lines changed: 127 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
@include media-breakpoint-down(sm) {
1111
text-align: center;
1212
}
13+
14+
.row {
15+
height: auto;
16+
padding-bottom: 2rem;
17+
}
1318
}
1419

1520
.our-services,
@@ -22,172 +27,167 @@
2227
}
2328
}
2429

25-
.row {
26-
height: auto;
27-
padding-bottom: 2rem;
28-
}
29-
}
30+
.our-services {
31+
.container {
32+
max-width: 960px;
33+
}
3034

31-
.our-services,
32-
.worked-with {
33-
padding: 5rem 0;
35+
.card {
36+
background: rgba($gray-100, 0.5);
37+
border-radius: 22px;
38+
max-width: 290px;
3439

35-
.header {
36-
margin: 0 auto 3rem;
37-
max-width: 768px;
38-
}
39-
}
40+
@include media-breakpoint-down(sm) {
41+
margin-bottom: 2rem;
42+
}
4043

41-
.our-services {
42-
.container {
43-
max-width: 960px;
44-
}
44+
h3 {
45+
color: $orange-dark;
46+
}
4547

46-
.card {
47-
background: rgba($gray-100, 0.5);
48-
border-radius: 22px;
49-
max-width: 290px;
48+
.card-img-top {
49+
margin: 2rem 0;
50+
padding: 1rem;
51+
}
5052

51-
@include media-breakpoint-down(sm) {
52-
margin-bottom: 2rem;
53-
}
53+
.card-body {
54+
text-align: left;
5455

55-
h3 {
56-
color: $orange-dark;
57-
}
56+
@include media-breakpoint-down(sm) {
57+
text-align: center;
58+
}
59+
}
5860

59-
.card-img-top {
60-
margin: 2rem 0;
61-
padding: 1rem;
61+
.line-break {
62+
margin: 0 2rem;
63+
}
6264
}
65+
}
6366

64-
.worked-with {
65-
app-img {
66-
img {
67-
padding: 2rem;
67+
.worked-with {
68+
app-img {
69+
img {
70+
padding: 2rem;
6871

69-
@include media-breakpoint-down(sm) {
70-
padding: 2rem 6.5rem;
71-
}
72+
@include media-breakpoint-down(sm) {
73+
padding: 2rem 6.5rem;
7274
}
7375
}
76+
}
77+
}
7478

75-
.line-break {
76-
margin: 0 2rem;
79+
.example {
80+
height: auto;
81+
82+
.main-content {
83+
background-color: $gray-100;
84+
display: flex;
85+
86+
@include media-breakpoint-down(sm) {
87+
display: block;
7788
}
7889
}
7990

80-
.example {
81-
height: auto;
91+
.sidebar {
92+
width: 50%;
93+
@include media-breakpoint-down(sm) {
94+
display: none;
95+
}
96+
}
8297

83-
.worked-with {
84-
img {
85-
padding: 2rem;
98+
.content {
99+
width: 50%;
86100

87-
@include media-breakpoint-down(sm) {
88-
padding: 2rem 6.5rem;
89-
}
90-
}
101+
@include media-breakpoint-down(sm) {
102+
width: 100%;
91103
}
92104

93-
.example {
105+
.content-panel {
106+
align-items: flex-end;
107+
display: flex;
94108
height: auto;
109+
justify-content: center;
110+
text-align: center;
95111

96-
.main-content {
97-
background-color: $gray-100;
98-
display: flex;
99-
100-
@include media-breakpoint-down(sm) {
101-
display: block;
102-
}
103-
}
104-
105-
.sidebar {
106-
width: 50%;
107-
@include media-breakpoint-down(sm) {
108-
display: none;
109-
}
112+
@include media-breakpoint-down(sm) {
113+
display: table;
110114
}
115+
}
111116

112-
.content {
113-
width: 50%;
117+
.last-panel {
118+
height: 0;
119+
}
120+
}
114121

115-
@include media-breakpoint-down(sm) {
116-
width: 100%;
117-
}
122+
.content-panel-inner {
123+
align-items: center;
124+
background-color: $gray-100;
125+
display: flex;
126+
height: 655px;
127+
justify-content: center;
118128

119-
.content-panel {
120-
align-items: flex-end;
121-
display: flex;
122-
height: auto;
123-
justify-content: center;
124-
text-align: center;
129+
.panel-inner-text {
130+
margin: 0 4rem;
131+
text-align: left;
125132

126-
@include media-breakpoint-down(sm) {
127-
display: table;
128-
}
129-
}
133+
@include media-breakpoint-down(sm) {
134+
margin: 0 1rem;
135+
text-align: center;
136+
}
130137

131-
.content-panel-image {
132-
h2 {
133-
color: white;
134-
font-size: 40px;
135-
font-weight: bold;
136-
padding: 16px;
137-
text-align: center;
138-
}
139-
140-
h2 {
141-
color: $orange-dark;
142-
font-size: 42px;
143-
font-weight: bold;
144-
line-height: 1.19;
145-
}
146-
147-
.phone-image {
148-
img {
149-
height: 440px;
150-
151-
@include media-breakpoint-down(sm) {
152-
height: auto;
153-
}
154-
}
155-
}
156-
}
138+
h2 {
139+
color: $orange-dark;
140+
font-size: 42px;
141+
font-weight: bold;
142+
line-height: 1.19;
157143
}
158144

159-
.content-panel-image {
160-
h2 {
161-
color: white;
162-
font-size: 40px;
163-
font-weight: bold;
164-
padding: 16px;
165-
text-align: center;
166-
margin-top: 2rem;
167-
}
145+
p {
146+
color: $gray-dark;
147+
font-size: 18px;
148+
line-height: 1.78;
149+
}
150+
}
151+
}
168152

169-
.store-buttons {
170-
padding: 0 0 60px 0;
171-
@include media-breakpoint-down(sm) {
172-
padding: 0 0 40px 0;
173-
}
174-
}
153+
.content-panel-image {
154+
h2 {
155+
color: white;
156+
font-size: 40px;
157+
font-weight: bold;
158+
padding: 16px;
159+
text-align: center;
160+
margin-top: 2rem;
161+
}
175162

176-
.phone-image {
177-
img {
178-
max-height: 440px;
179-
}
180-
}
163+
.store-buttons {
164+
padding: 0 0 60px 0;
165+
@include media-breakpoint-down(sm) {
166+
padding: 0 0 40px 0;
181167
}
168+
}
182169

183-
.description {
184-
display: none;
170+
.phone-image {
171+
img {
172+
height: 440px;
185173

186174
@include media-breakpoint-down(sm) {
187-
display: flex;
175+
height: auto;
188176
}
189177
}
190178
}
191179
}
180+
181+
.description {
182+
display: none;
183+
184+
@include media-breakpoint-down(sm) {
185+
display: flex;
186+
}
187+
}
188+
}
189+
190+
.line-break {
191+
border-bottom: 1px solid $gray-800;
192192
}
193193
}

0 commit comments

Comments
 (0)