FROM CACHE - jp_header

【カスタムCSS編集】スマホ表示でグリッドのアイテムを横一列に並べる方法

解決済

【カスタムCSS編集】スマホ表示でグリッドのアイテムを横一列に並べる方法

しゅうた
Shopify Partner
3 0 0

現在Stilettoというテーマを使用中です。
PC画面ではグリッドのアイテムを横一列に並べることができるのですが、スマホ画面にすると縦になります。
特に横一列に並べる設定がないので、カスタムCSSからいじるしかないと思うのですが、具体的なコードを教えていただきたいです。

ちなみに並べるアイテムは2つで、間のギャップ(隙間)はなしでおねがいします。

スクリーンショット 2024-06-17 0.45.10.png

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1537 549 697

成功

質問拝見しました。

こちらcssを以下適用すればできるかと思います。

今一個の四角が横幅100%占めているので、以下cssで2個並ぶように横幅を調整いたします。

.grid-item {
width: 45%;
}

 

次にデフォルトで、四角が折り返すようになっているので、折り返さずにこ並ぶように以下cssを加えます。

.grid__inner {
flex-wrap: nowrap;
}

2個並べるのは以上のcssでできるかと思いますので、各種文字や写真、ボタンの高さや大きさは調整していただければと思います。

 

ご参考までにしてください。

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1537 549 697

成功

質問拝見しました。

こちらcssを以下適用すればできるかと思います。

今一個の四角が横幅100%占めているので、以下cssで2個並ぶように横幅を調整いたします。

.grid-item {
width: 45%;
}

 

次にデフォルトで、四角が折り返すようになっているので、折り返さずにこ並ぶように以下cssを加えます。

.grid__inner {
flex-wrap: nowrap;
}

2個並べるのは以上のcssでできるかと思いますので、各種文字や写真、ボタンの高さや大きさは調整していただければと思います。

 

ご参考までにしてください。

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
しゅうた
Shopify Partner
3 0 0

株式会社フルバランス様
コメントありがとうございます。

上記のCSSの記載を行ったところ、アイテムの上部にほんと少しの段差?のようなものができてしまいます、こちらはどのように対応したらよろしいでしょうか?
また、スマホ表示だけ内部の文字を全体的に見れるようにできませんでしょうか?
立て続けに申し訳ありません、よろしければご教示いただけますと幸いです。

スクリーンショット 2024-06-17 13.51.04.png