現在Stilettoというテーマを使用中です。
PC画面ではグリッドのアイテムを横一列に並べることができるのですが、スマホ画面にすると縦になります。
特に横一列に並べる設定がないので、カスタムCSSからいじるしかないと思うのですが、具体的なコードを教えていただきたいです。
ちなみに並べるアイテムは2つで、間のギャップ（隙間）はなしでおねがいします。
Topic summary
主題: スマホ表示でグリッド要素（2個）を横一列・隙間なしで並べたい（Stilettoテーマ）。
提案された対応:
- 個々の要素幅を縮めて2列化（例: .grid-item { width: 45%; }）。
- 親要素で折り返しを無効化して横並び維持（.grid__innerでnowrap指定）。
- 文字・画像・ボタンの高さや大きさは別途調整する前提。
発生している問題/追加要望:
- 上記CSS適用後、各アイテム上部にわずかな段差が発生。解消方法の相談あり。
- スマホ表示時に内部テキストを「全体的に見える」ようにしたい要望（表示の切れ/省略回避やサイズ調整の相談）。
- 参考用スクリーンショットが添付され、現象の確認に重要。
現状/結論:
- 解決策は提示されたが、段差解消とスマホでのテキスト表示最適化は未解決。追加のCSS調整に関する回答待ちで、議論は継続中。
質問拝見しました。
こちらcssを以下適用すればできるかと思います。
今一個の四角が横幅100%占めているので、以下cssで2個並ぶように横幅を調整いたします。
.grid-item {
width: 45%;
}
次にデフォルトで、四角が折り返すようになっているので、折り返さずにこ並ぶように以下cssを加えます。
.grid__inner {
flex-wrap: nowrap;
}
2個並べるのは以上のcssでできるかと思いますので、各種文字や写真、ボタンの高さや大きさは調整していただければと思います。
ご参考までにしてください。
なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。
株式会社フルバランス
1 Like
