mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-09 15:46:55 +02:00
Code Issues Releases Wiki Activity

Increase width

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-05-08 14:17:52 +07:00
parent bc235077b7
commit cd56f2e0bb
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.css
View File

@@ -38,7 +38,7 @@ a {
/* Layout */ /* Layout */
.container { .container {
margin: 0 auto; margin: 0 auto;
max-width: 64rem; max-width: 80rem;
padding: 0 1rem; padding: 0 1rem;
} }
.content { .content {

22
client/pages/homePage.css
View File

@@ -6,13 +6,12 @@
.home__features { .home__features {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 2.5rem auto; margin: 1rem -1rem;
max-width: 48rem;
} }
.home__feature { .home__feature {
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
width: 50%; width: 100%;
} }
.home__icon { .home__icon {
color: var(--color-blue-6); color: var(--color-blue-6);
@@ -25,7 +24,7 @@
} }
.home__patterns { .home__patterns {
height: 60rem; height: 80rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
@@ -63,16 +62,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
height: 180rem;
opacity: 0.8; opacity: 0.8;
} }
.home__slide { .home__slide {
animation: slide 20s linear infinite; animation: slide 20s linear infinite;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 60rem;
justify-content: center; justify-content: center;
width: 60rem;
will-change: transform; will-change: transform;
} }
@@ -92,3 +88,15 @@
transform: translateY(-100%); transform: translateY(-100%);
} }
} }
/* Responsive */
@media (min-width: 640px) {
.home__feature {
width: 50%;
}
}
@media (min-width: 1024px) {
.home__feature {
width: 33.333333%;
}
}