Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit6a15e79

Browse files
committed
fix mobile version
1 parent1520977 commit6a15e79

File tree

1 file changed

+121
-101
lines changed

1 file changed

+121
-101
lines changed

‎92-music streaming service/style.css

Lines changed: 121 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,7 @@ body {
1313
padding:0;
1414
}
1515

16-
.full-height-grow {
17-
display: flex;
18-
flex-direction: column;
19-
min-height:100vh;
20-
}
21-
22-
.brand-logo {
23-
display: flex;
24-
align-items: center;
25-
color: inherit;
26-
text-decoration: none;
27-
}
28-
29-
.brand-logo-name {
30-
font-size:1.25em;
31-
font-weight: normal;
32-
margin:0001rem;
33-
}
16+
/* header and footer */
3417

3518
.main-navul,
3619
.footer-navul {
@@ -63,25 +46,25 @@ body {
6346
height:140px;
6447
}
6548

49+
.brand-logo {
50+
display: flex;
51+
align-items: center;
52+
color: inherit;
53+
text-decoration: none;
54+
}
55+
56+
.brand-logo-name {
57+
font-size:1.25em;
58+
font-weight: normal;
59+
margin:0001rem;
60+
}
61+
6662
.main-footer {
6763
height:70px;
6864
background-color:#202027;
6965
font-weight: bold;
7066
}
7167

72-
@media (max-width:768px) {
73-
.main-header,
74-
.container {
75-
flex-direction: column;
76-
align-items: center;
77-
justify-content: center;
78-
gap:1rem;
79-
}
80-
.main-footer {
81-
height:140px;
82-
}
83-
}
84-
8568
.social-linksvg {
8669
width:1em;
8770
margin-right:0.25rem;
@@ -92,46 +75,21 @@ body {
9275
justify-content: space-between;
9376
}
9477

78+
/* layout */
79+
80+
.full-height-grow {
81+
display: flex;
82+
flex-direction: column;
83+
min-height:100vh;
84+
}
85+
9586
.container {
9687
max-width:1200px;
9788
margin:0 auto;
9889
padding:040px;
9990
flex-grow:1;
10091
}
10192

102-
.title {
103-
font-weight:500;
104-
font-size:3em;
105-
margin-bottom:1rem;
106-
margin-top:0;
107-
}
108-
109-
.subtitle {
110-
font-weight:500;
111-
font-size:1.2em;
112-
margin-bottom:2rem;
113-
}
114-
115-
.btn {
116-
cursor: pointer;
117-
background-color:#1762a7;
118-
color: white;
119-
text-decoration: none;
120-
font-size:0.9rem;
121-
border-radius:0.5rem;
122-
padding:0.75rem1.5rem;
123-
outline: none;
124-
border: none;
125-
}
126-
127-
.btn:hover {
128-
background-color:#2180d8;
129-
}
130-
131-
.btn:focus {
132-
background-color:#2796ff;
133-
}
134-
13593
/* hero */
13694

13795
.hero-section {
@@ -165,14 +123,37 @@ body {
165123
align-self: center;
166124
}
167125

168-
@media (max-width:900px) {
169-
.hero-section .img-wrapper {
170-
display: none;
171-
}
126+
.title {
127+
font-weight:500;
128+
font-size:3em;
129+
margin-bottom:1rem;
130+
margin-top:0;
131+
}
172132

173-
.hero-section {
174-
justify-content: center;
175-
}
133+
.subtitle {
134+
font-weight:500;
135+
font-size:1.2em;
136+
margin-bottom:2rem;
137+
}
138+
139+
.btn {
140+
cursor: pointer;
141+
background-color:#1762a7;
142+
color: white;
143+
text-decoration: none;
144+
font-size:0.9rem;
145+
border-radius:0.5rem;
146+
padding:0.75rem1.5rem;
147+
outline: none;
148+
border: none;
149+
}
150+
151+
.btn:hover {
152+
background-color:#2180d8;
153+
}
154+
155+
.btn:focus {
156+
background-color:#2796ff;
176157
}
177158

178159
.hero-circle-1 {
@@ -258,23 +239,6 @@ body {
258239
width:40px;
259240
}
260241

261-
@media (max-width:800px) {
262-
.discover-section {
263-
flex-direction: column;
264-
justify-content: center;
265-
}
266-
267-
.discover-section .covers-image {
268-
margin:2rem00;
269-
height:30vh;
270-
width: auto;
271-
}
272-
273-
.icon-section {
274-
justify-content: center;
275-
}
276-
}
277-
278242
/* join */
279243

280244
.join-section {
@@ -331,19 +295,6 @@ body {
331295
border-color:#596da0;
332296
}
333297

334-
@media (max-width:900px) {
335-
.join-section {
336-
flex-direction: column;
337-
justify-content: center;
338-
}
339-
340-
.join-form {
341-
width:80vw;
342-
max-width: inherit;
343-
margin:2rem0;
344-
}
345-
}
346-
347298
.circles {
348299
position: relative;
349300
}
@@ -387,3 +338,72 @@ body {
387338
border-radius:50%;
388339
background-color:rgb(52,87,178,0.1);
389340
}
341+
342+
@media (max-width:992px) {
343+
.main-header,
344+
.container {
345+
flex-direction: column;
346+
align-items: center;
347+
justify-content: center;
348+
gap:1rem;
349+
}
350+
351+
.main-footer {
352+
height:140px;
353+
}
354+
355+
.hero-section {
356+
flex-direction: column-reverse;
357+
}
358+
359+
.hero-section .call-to-action {
360+
align-items: center;
361+
}
362+
363+
.title {
364+
font-size:2em;
365+
margin-bottom:0.5rem;
366+
}
367+
368+
.subtitle {
369+
font-size:1em;
370+
margin-bottom:1rem;
371+
text-align: center;
372+
}
373+
374+
@media (max-height:500px) {
375+
.hero-section .lady-image {
376+
display: none;
377+
}
378+
}
379+
380+
.discover-section {
381+
flex-direction: column;
382+
justify-content: center;
383+
}
384+
385+
.discover-section .covers-image {
386+
margin:2rem00;
387+
height:30vh;
388+
width: auto;
389+
}
390+
391+
.icon-section {
392+
justify-content: center;
393+
}
394+
395+
.join-section {
396+
flex-direction: column;
397+
justify-content: center;
398+
}
399+
400+
.join-text {
401+
font-size:2.5em;
402+
}
403+
404+
.join-form {
405+
width:80vw;
406+
max-width: inherit;
407+
margin:2rem0;
408+
}
409+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp