質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

327閲覧

html css モバイル表示時に要素を縦に2つずつ表示したい

syosinsya_html

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/01/27 04:33

編集2023/01/27 15:39

モバイル表示時に要素を縦に2つずつ表示したい

スマホでこのページを表示するときに、現在のコードだと要素が縦に一つずつ表示する仕様なんですが、それだと長過ぎるので横に要素を2つずつ表示させたいです。
しかしcssの関連していそうな部分を試行錯誤してみてもうまくいかず質問させて頂きます

希望表示画像↓(2つずつ縦に表示)

希望表示

該当のソースコード

html

1<head> 2 <link rel="stylesheet" href="css/bootstrap.css"> 3 <link rel="stylesheet" href="css/fonts.css"> 4 <link rel="stylesheet" href="css/style.css"> 5</head> 6 7 <body> 8 <div class="page text-center"> 9 <section class="section text-center bg-default"> 10 <div class="container"> 11 <div class="row justify-content-sm-center justify-content-md-start offset-top-0"> 12 <div class="col-sm-10 col-md-7 section-image-aside section-image-aside-right"> 13 <div class="section-image-aside-img d-none d-md-block view-animate zoomInSmall delay-04" style="background-image: url(images/home-01-846x1002.jpg)"></div> 14 <div class="section-image-aside-body section-xl inset-lg-right-70 inset-xl-right-110"> 15 <h2 class="home-headings-custom fw-bold view-animate fadeInLeftSm delay-04"><span class="first-word">Our</span> Features</h2> 16 <div class="offset-top-35 offset-md-top-60 view-animate fadeInLeftSm delay-06">Jonathan Carroll University was founded on the principle that by pursuing big ideas and sharing what we learn, we make the world a better place. For more than 135 years, we haven’t strayed from that vision.</div> 17 <div class="text-center text-sm-start"> 18 <div class="row row-65 justify-content-sm-center justify-content-lg-start offset-top-65 counters"> 19 <div class="col-sm-6 view-animate fadeInLeftSm delay-08"> 20 <!-- Counter type 1--> 21 <div class="unit flex-column flex-sm-row unit-responsive-md counter-type-2"> 22 <div class="unit-left"><span class="icon icon-md text-madison mdi mdi-school"></span></div> 23 <div class="unit-body"> 24 <div class="h3 fw-bold text-primary"><span class="counter" data-speed="1300">15</span><span></span></div> 25 <div class="offset-top-3"> 26 <h6 class="text-black font-accent fw-bold">Awards</h6> 27 </div> 28 </div> 29 </div> 30 </div> 31 <div class="col-sm-6 view-animate fadeInLeftSm delay-04"> 32 <!-- Counter type 1--> 33 <div class="unit flex-column flex-sm-row unit-responsive-md counter-type-2"> 34 <div class="unit-left"><span class="icon icon-md text-madison mdi mdi-wallet-travel"></span></div> 35 <div class="unit-body"> 36 <div class="h3 fw-bold text-primary"><span class="counter" data-speed="1250">30</span><span>+</span></div> 37 <div class="offset-top-3"> 38 <h6 class="text-black font-accent fw-bold">Certified Teachers</h6> 39 </div> 40 </div> 41 </div> 42 </div> 43 <div class="col-sm-6 view-animate fadeInLeftSm delay-1"> 44 <!-- Counter type 1--> 45 <div class="unit flex-column flex-sm-row unit-responsive-md counter-type-2"> 46 <div class="unit-left"><span class="icon icon-md text-madison mdi mdi-domain"></span></div> 47 <div class="unit-body"> 48 <div class="h3 fw-bold text-primary offset-top-5"><span class="counter" data-step="500">10</span></div> 49 <div class="offset-top-3"> 50 <h6 class="text-black font-accent fw-bold">Featured Programs </h6> 51 </div> 52 </div> 53 </div> 54 </div> 55 <div class="col-sm-6 view-animate fadeInLeftSm delay-06"> 56 <!-- Counter type 1--> 57 <div class="unit flex-column flex-sm-row unit-responsive-md counter-type-2"> 58 <div class="unit-left"><span class="icon icon-md text-madison mdi mdi-account-multiple-outline"></span></div> 59 <div class="unit-body"> 60 <div class="h3 fw-bold text-primary offset-top-5"><span class="counter" data-step="1500">6510</span></div> 61 <div class="offset-top-3"> 62 <h6 class="text-black font-accent fw-bold">Students</h6> 63 </div> 64 </div> 65 </div> 66 </div> 67 </div> 68 </div> 69 </div> 70 </div> 71 </div> 72 </div> 73 </section> 74 </div> 75</body>

css/style.cs

1cssは回答者様が答えやすいようにギガファイルに添付いたしました 2https://32.gigafile.nu/0203-ce50506e613809b5b87c8d669db14280d

bootstrap.css

1bootstrapも回答者様が答えやすいようにギガファイルに添付いたしました 2https://10.gigafile.nu/0203-d27f362d30c1bbccbfe349d84e715ed99 3 4※Bootstrap v5.0.0になります

おそらく、
div class="row row-65 justify-content-sm-center justify-content-lg-start offset-top-65 counters
のどこかだと思うのですが、全ていじってみても変わらなかったので、お助け頂けると幸いです。
よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tori72

2023/01/27 06:10

Bootstrapのバージョンはいくつでしょうか? CSSと一緒にアップしてもらえると回答しやすいかと思います
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問