crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 bug: style responsive product info

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-09-22 12:12:30 +07:00
parent f925fa0304
commit 771abdefa2
3 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
View File

@@ -4,7 +4,7 @@
@apply spacing-horizontal; @apply spacing-horizontal;
margin: 0 auto 5.6rem; margin: 0 auto 5.6rem;
@screen md { @screen md {
@apply flex; @apply flex justify-center;
margin: 5.6rem auto; margin: 5.6rem auto;
} }
@@ -16,6 +16,9 @@
@screen sm-only { @screen sm-only {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@screen md {
max-width: 50%;
}
@screen lg { @screen lg {
max-width: 60rem; max-width: 60rem;
} }

2
src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss
View File

@@ -4,7 +4,7 @@
@apply spacing-horizontal; @apply spacing-horizontal;
padding-bottom: 4rem; padding-bottom: 4rem;
@screen md { @screen md {
@apply flex; @apply flex justify-center;
padding-bottom: 5.6rem; padding-bottom: 5.6rem;
} }
} }

3
src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss
View File

@@ -3,6 +3,9 @@
@screen sm-only { @screen sm-only {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@screen md {
max-width: 50%;
}
@screen lg { @screen lg {
max-width: 60rem; max-width: 60rem;
} }