Liquid、JavaScriptなどに関する質問
現在Stilettoというテーマを使用中です。
PC画面ではグリッドのアイテムを横一列に並べることができるのですが、スマホ画面にすると縦になります。
特に横一列に並べる設定がないので、カスタムCSSからいじるしかないと思うのですが、具体的なコードを教えていただきたいです。
ちなみに並べるアイテムは2つで、間のギャップ(隙間)はなしでおねがいします。
解決済! ベストソリューションを見る。
成功
質問拝見しました。
こちらcssを以下適用すればできるかと思います。
今一個の四角が横幅100%占めているので、以下cssで2個並ぶように横幅を調整いたします。
.grid-item {
width: 45%;
}
次にデフォルトで、四角が折り返すようになっているので、折り返さずにこ並ぶように以下cssを加えます。
.grid__inner {
flex-wrap: nowrap;
}
2個並べるのは以上のcssでできるかと思いますので、各種文字や写真、ボタンの高さや大きさは調整していただければと思います。
ご参考までにしてください。
なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。
株式会社フルバランス
成功
質問拝見しました。
こちらcssを以下適用すればできるかと思います。
今一個の四角が横幅100%占めているので、以下cssで2個並ぶように横幅を調整いたします。
.grid-item {
width: 45%;
}
次にデフォルトで、四角が折り返すようになっているので、折り返さずにこ並ぶように以下cssを加えます。
.grid__inner {
flex-wrap: nowrap;
}
2個並べるのは以上のcssでできるかと思いますので、各種文字や写真、ボタンの高さや大きさは調整していただければと思います。
ご参考までにしてください。
なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。
株式会社フルバランス
株式会社フルバランス様
コメントありがとうございます。
上記のCSSの記載を行ったところ、アイテムの上部にほんと少しの段差?のようなものができてしまいます、こちらはどのように対応したらよろしいでしょうか?
また、スマホ表示だけ内部の文字を全体的に見れるようにできませんでしょうか?
立て続けに申し訳ありません、よろしければご教示いただけますと幸いです。
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024