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

[ss_kb]

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

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

 

[株式会社フルバランス · Accepted solution]

質問拝見しました。

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

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

.grid-item {
width: 45%;
}

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

.grid__inner {
flex-wrap: nowrap;
}

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

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

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

株式会社フルバランス

[ss_kb]

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

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