diff --git a/src/components/atoms/GameItemSkeleton.js b/src/components/atoms/GameItemSkeleton.js index 6b82f1d..c91ec5f 100644 --- a/src/components/atoms/GameItemSkeleton.js +++ b/src/components/atoms/GameItemSkeleton.js @@ -7,7 +7,7 @@ const SkeletonStyle = styled.div` width: 380px; height: 300px; margin: 10px; - float: left; + display: inline-block; border-radius: 10px; box-shadow: 0 0 0 2px #ccc; diff --git a/src/components/molecules/GameItem.js b/src/components/molecules/GameItem.js index 84728d3..aaf2558 100644 --- a/src/components/molecules/GameItem.js +++ b/src/components/molecules/GameItem.js @@ -7,7 +7,7 @@ const GameItemBlock = styled.div` width: 380px; height: 300px; margin: 10px; - float: left; + display: inline-block; border-radius: 10px; box-shadow: 0 0 0 2px #ddddff; cursor: pointer; diff --git a/src/components/organisms/GameList.js b/src/components/organisms/GameList.js index 484cf98..b94c77b 100644 --- a/src/components/organisms/GameList.js +++ b/src/components/organisms/GameList.js @@ -7,10 +7,14 @@ import SortSelect from "../atoms/SortSelect"; import AdBlock from "../atoms/AdBlock"; const GameStyle = styled.div` + @media (max-width: 950px) { + width: 800px; + } margin: auto; - width: 1200px; + width: 90%; height: auto; overflow: hidden; + text-align: center; .sortbox { text-align: right; select {