# スマホでの商品表示を2列にしたい

**URL:** <https://community.shopify.com/t/topic/74749>\
**Category:** 技術的なQ＆A\
**Created:** [October 28, 2021, 8:24am UTC](https://community.shopify.com/t/topic/74749 "2021-10-28T08:24:27Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

テーマ「Brooklyn」で、スマホ表示時に商品の1列レイアウトを2列に変更したいという要望。

提案: CSSのメディアクエリでスマホ幅を対象にし、対象範囲内で .medium--one-half に width: 50% を指定する。例として、min-width をスマホ横幅サイズに調整し、max-width: 768px の範囲で適用するコードスニペットが提示された。

補足: メディアクエリは画面幅などの条件に応じてスタイルを切り替える仕組みで、スマホ時のグリッドを2分割（50%幅）にする意図。

現状: 提案のみ提示され、動作検証や解決報告は未記載。コードスニペットが理解の中心。

<div class="post-metadata">

**Author:** ![tep](https://avatars.discourse-cdn.com/v4/letter/t/cab0a1/32.png) [@tep](https://community.shopify.com/u/tep)\
**Post date:** [October 28, 2021, 8:24am UTC](https://community.shopify.com/t/topic/74749/1 "2021-10-28T08:24:27Z")

</div>

お世話になります。

Shopify _無料\*\*テーマ「Brooklyn」を使用しています。_

デフォルトでスマホ時に商品表示が1列になっているので、2列表示に変更したいです。

どなたかご教授いただけるとありがたいです。

よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![THEM](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/them/32/89901_2.png) [@THEM](https://community.shopify.com/u/THEM)\
**Post date:** [October 28, 2021, 10:05am UTC](https://community.shopify.com/t/topic/74749/2 "2021-10-28T10:05:03Z")

</div>

以下min-widthの値をスマホ横幅サイズに変更したらいかがでしょう？

```css
@media only screen and (min-width: 591px) and (max-width: 768px)
.medium--one-half {
 width: 50%;
}

```