Skip to content

Commit 26b3535

Browse files
author
tiko
committed
Service page added support for tablets (768px/sm)
1 parent f96c06f commit 26b3535

File tree

6 files changed

+69
-54
lines changed

6 files changed

+69
-54
lines changed

‎src/components/ReadMoreButton.jsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ const LeesMeerContainer = styled(Link)`
1717
color: #f7f7f7;
1818
z-index: +100;
1919
text-align: left;
20-
@media(${mediaQueryMin.xs}){
20+
@media (${mediaQueryMin.xs}) {
21+
height: 11vmin;
22+
}
23+
@media(${mediaQueryMin.sm}){
2124
height: 10vh;
2225
width: 10vw;
2326
}
@@ -27,9 +30,9 @@ const ArrowText = styled.p`
2730
width: 70%;
2831
align-self: stretch;
2932
font-weight: 400;
30-
font-size: ${props => (props.small ? '4.7vmin' : '6vmin')};
31-
@media (${mediaQueryMin.xs}) {
32-
font-size: 1.35vmin;
33+
font-size: ${props => (props.small ? '4.2vmin' : '6vmin')};
34+
@media (${mediaQueryMin.xs}){
35+
font-size: ${props => (props.small ? '4.4vmin' : '5.1vmin')};
3336
}
3437
@media (${mediaQueryMin.sm}) {
3538
font-size: 1.45vmin;
@@ -45,9 +48,13 @@ const ArrowText = styled.p`
4548
const ArrowImage = styled.img`
4649
position: relative;
4750
top: ${props => (props.small ? '20%' : '30%')};
48-
right: ${props => (props.small ? '5%' : '15%')};
51+
right: ${props => (props.small ? '0%' : '15%')};
4952
width: 40%;
5053
@media (${mediaQueryMin.xs}){
54+
top: ${props => (props.small ? '30%' : '30%')};
55+
right: ${props => (props.small ? '0%' : '20%')};
56+
}
57+
@media (${mediaQueryMin.sm}){
5158
top:15%;
5259
right:0;
5360
}

‎src/containers/Service/Service.components.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ export const ServiceBackgroundImage = styled.img`
4949
overflow: visible;
5050
position: relative;
5151
bottom: 45vmin;
52+
@media (${mediaQueryMin.xs}){
53+
bottom: 60vmin;
54+
}
5255
@media (${mediaQueryMin.sm}) {
5356
bottom: 38vmin;
5457
}

‎src/containers/Service/ServiceCard.components.js‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,29 @@ import theme from '../../styles/theme';
44
const { mediaQueryMin } = theme;
55

66
export const CardContainer = styled.section`
7-
width: 80%;
7+
width: 70%;
88
height: 70vmin;
99
left: 10%;
1010
position: relative;
1111
bottom: 20vmin;
12-
@media (${mediaQueryMin.xs}) {
12+
@media (${mediaQueryMin.sm}) {
1313
margin-top: 30vmin;
1414
margin-bottom: 10vmin;
15-
bottom:0;
15+
bottom:30vmin;
1616
}
1717
@media (${mediaQueryMin.sm}) {
1818
margin-bottom: 30vmin;
19+
bottom: 0;
1920
}
2021
`;
2122

2223
export const TextContainer = styled.section`
2324
width:90%;
2425
height: 90%;
2526
background: #262626;
27+
padding: 12% 10%;
28+
@media (${mediaQueryMin.sm}){
2629
padding: 10% 8% 10% 6%;
27-
@media (${mediaQueryMin.xs}){
2830
width: 35vw;
2931
height: 35vw;
3032
margin-left: 10%;
@@ -38,9 +40,8 @@ export const StyledText = styled.p`
3840
font-size: 3.5vmin;
3941
letter-spacing: 0;
4042
font-weight: 400;
41-
@media (${mediaQueryMin.xs}) {
42-
font-size: 1.4vmin;
43-
line-height: 2.4vmin;
43+
@media (${mediaQueryMin.xs}){
44+
font-size: 3vmin;
4445
}
4546
@media (${mediaQueryMin.sm}) {
4647
font-size: 2vmin;
@@ -58,7 +59,7 @@ export const StyledText = styled.p`
5859

5960
export const ImageContainer = styled.section`
6061
width: 120vw;
61-
@media (${mediaQueryMin.xs}){
62+
@media (${mediaQueryMin.sm}){
6263
width: 40vw;
6364
height: 65vmin;
6465
}
@@ -69,15 +70,9 @@ export const StyledImage = styled.img`
6970
bottom: 80vmin;
7071
left: 10vw;
7172
z-index: -1;
72-
@media (${mediaQueryMin.xs}) {
73-
bottom: 25vmin;
74-
left: 30vw;
75-
}
7673
@media (${mediaQueryMin.sm}) {
7774
bottom: 38vmin;
78-
}
79-
@media (${mediaQueryMin.md}) {
80-
bottom: 38vmin;
75+
left: 30vw;
8176
}
8277
`;
8378

@@ -89,13 +84,13 @@ export const StyledSubtitle = styled.p`
8984
line-height: 0.1vmin;
9085
letter-spacing: 0.6vmin;
9186
margin-bottom: 3vmin;
92-
@media (${mediaQueryMin.xs}) {
93-
font-size: 1.6vmin;
94-
letter-spacing: 0.4vmin;
95-
margin-bottom: 1.33em;
87+
@media (${mediaQueryMin.xs}){
88+
font-size: 2.5vmin;
9689
}
9790
@media (${mediaQueryMin.sm}) {
9891
font-size: 1.6vmin;
92+
letter-spacing: 0.4vmin;
93+
margin-bottom: 1.33em;
9994
}
10095
`;
10196

@@ -109,12 +104,13 @@ export const StyledTitleMedium = styled.h3`
109104
letter-spacing: 0.1vmin;
110105
line-height: 10vmin;
111106
margin-bottom: 4vmin;
112-
@media (${mediaQueryMin.xs}) {
113-
height: 20%;
114-
font-size: 4.1vmin;
115-
line-height: 4.3vmin;
107+
@media (${mediaQueryMin.xs}){
108+
font-size: 9vmin;
109+
line-height: 9vmin;
110+
margin-bottom: 3.4vmin;
116111
}
117112
@media (${mediaQueryMin.sm}) {
113+
height:20%;
118114
font-size: 5.6vmin;
119115
line-height: 6vmin;
120116
margin-bottom: 6vmin;

‎src/containers/Service/ServiceHeader.components.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ export const StyledContainer = styled.section`
1717
flex-wrap: wrap;
1818
position: relative;
1919
margin-bottom: 1%;
20+
bottom: 10vmin;
21+
}
22+
@media (${mediaQueryMin.sm}) {
23+
bottom: 0;
2024
}
2125
}
2226

‎src/containers/Service/ServiceItem.components.js‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@ export const StyledContainer = styled.section`
1515
margin-left: ${props => (props.src ? '10vw' : '0vw')};
1616
background-color: ${props => (props.light ? '#262626' : '#1a1a1a')};
1717
@media (${mediaQueryMin.xs}) {
18-
height: 56vmin;
18+
bottom: 40vmin;
19+
}
20+
@media (${mediaQueryMin.sm}) {
1921
width: 95vw;
2022
margin-left: 5vw;
2123
display: flex;
2224
flex-direction: row;
23-
bottom: 0;
2425
margin-bottom: 10vmin;
2526
margin-top: 0%;
26-
overflow: hidden;
27-
}
28-
@media (${mediaQueryMin.sm}) {
27+
bottom: 0;
2928
height: ${props => (props.src ? '70vmin' : '55vmin')};
3029
}
30+
3131
@media (${mediaQueryMin.md}) {
3232
height: ${props => (props.src ? '95vmin' : '60vmin')};
3333
margin-top: 15%;
@@ -41,13 +41,12 @@ export const StyledContainer = styled.section`
4141
export const ImageContainer = styled.section`
4242
position: relative;
4343
background-color: #262626;
44-
@media (${mediaQueryMin.xs}){
44+
@media (${mediaQueryMin.sm}){
4545
max-height: 90vmin;
4646
width: ${props => (props.light ? '62vw' : '55vw')};
4747
position: absolute;
4848
right: 0;
4949
bottom: 0;
50-
5150
}
5251
5352
`;
@@ -70,7 +69,6 @@ export const StyledTextContainer = styled.section`
7069
flex-direction: column;
7170
position: relative;
7271
top: ${props => (props.light ? '8%' : '4.5%')};
73-
margin-top: 0;
7472
}
7573
@media (${mediaQueryMin.lg}) {
7674
top: ${props => (props.light ? '8%' : '7%')};
@@ -86,16 +84,17 @@ export const StyledText = styled.p`
8684
font-size: 3.5vmin;
8785
font-weight: 400;
8886
text-align: left;
89-
@media (${mediaQueryMin.xs}) {
90-
max-width: 100%;
91-
font-size: 1.25vmin;
92-
letter-spacing: 0;
93-
line-height: 2.2vmin;
94-
text-align: left;
87+
@media (${mediaQueryMin.xs}){
88+
font-size: 3vmin;
89+
margin-bottom: 0.4em;
9590
}
9691
@media (${mediaQueryMin.sm}) {
92+
max-width: 100%;
9793
font-size: 1.4vmin;
9894
line-height: 2.3vmin;
95+
letter-spacing: 0;
96+
text-align: left;
97+
margin-bottom: 1.33em;
9998
}
10099
@media (${mediaQueryMin.md}) {
101100
font-size: 2vmin;
@@ -117,6 +116,9 @@ export const ListContainer = styled.section`
117116
position: relative;
118117
left: 35%;
119118
@media (${mediaQueryMin.xs}){
119+
left:40%;
120+
}
121+
@media (${mediaQueryMin.sm}){
120122
left: 0;
121123
padding-top: 7%;
122124
padding-left: 30%;
@@ -132,15 +134,15 @@ export const StyledList = styled.p`
132134
font-size: 5vmin;
133135
letter-spacing: 0.04vmin;
134136
line-height: 5.5vmin;
135-
@media (${mediaQueryMin.xs}) {
136-
height: 4vmin;
137-
font-size: 1.9vmin;
138-
letter-spacing: 0.04vmin;
139-
line-height: 2.6vmin;
137+
@media (${mediaQueryMin.xs}){
138+
font-size: 4vmin;
139+
line-height: 4vmin;
140140
}
141141
@media (${mediaQueryMin.sm}) {
142+
height: 4vmin;
142143
font-size: 2.1vmin;
143144
line-height: 3.1vmin;
145+
letter-spacing: 0.04vmin;
144146
}
145147
@media (${mediaQueryMin.md}) {
146148
font-size: 2.2vmin;
@@ -158,7 +160,11 @@ export const StyledSubtitle = styled.p`
158160
letter-spacing: 0.4vmin;
159161
opacity: 75%;
160162
margin-bottom: 3vmin;
163+
font-size: 4.3vmin;
161164
@media (${mediaQueryMin.xs}){
165+
font-size: 3.5vmin;
166+
}
167+
@media (${mediaQueryMin.sm}){
162168
height: 1.5vmin;
163169
164170
font-size: 1.6vmin;
@@ -172,19 +178,18 @@ export const StyledTitleMedium = styled.h3`
172178
font-size: 12vmin;
173179
margin-bottom: 3vmin;
174180
@media (${mediaQueryMin.xs}) {
181+
font-size: 9vmin;
182+
}
183+
@media (${mediaQueryMin.sm}) {
175184
width: ${props => (props.wide ? '90%' : '60%')};
176185
color: #ffffff;
177186
font-family: Lato;
178-
font-size: 3.4vmin;
187+
font-size: 4.2vmin;
188+
line-height: 6vmin;
179189
font-weight: bold;
180190
letter-spacing: 0.1vmin;
181-
line-height: 5vmin;
182191
margin-bottom: 0.66em;
183192
}
184-
@media (${mediaQueryMin.sm}) {
185-
font-size: 4.2vmin;
186-
line-height: 6vmin;
187-
}
188193
@media (${mediaQueryMin.md}) {
189194
font-size: 5.6vmin;
190195
line-height: 7.2vmin;

‎src/containers/Service/ServiceItemSmall.components.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const StyledContainer = styled.section`
1818
flex-wrap: wrap;
1919
position: relative;
2020
left: 22.5%;
21-
bottom: 0;
21+
bottom: 30vmin;
2222
}
2323
2424
@media (${mediaQueryMin.md}) {

0 commit comments

Comments
 (0)