Q&A
ソースコードはコードブロックを使って記載して下さい。
```ここに言語を入力
コード
```
の形式です。
また、見たところ、
それは、CSSではなく、SCSSですので、
コンパイル後のCSSの記載はできないでしょうか？
特に、bem記法ですと、第三者にとって、パッと見で現象原因の把握が非常にしにくいので、（開発効率に特化した記法なので）コンパイル後が望ましいです。
レスポンシブ対応でmax-widthを576pxとして設定し、@include｛font-size:108px;｝にしたのですが、ファントが変わったのは870pxでした。これがなぜ起こり、どう直すのかがわかりません。ご教授おねがいします
コードは、ejsが
</html><title>Tenkue App</title> <link rel="stylesheet" href="../src/asset/sass/app.css"> </head>
</html><body> <%- include('./_includes/_header') %> <main> <article class="p-top__mv"> </article> <article class="p-top__container"> <div class="p-top__inner l-content-wrap-default"> <h2 class="p-top__title">concept</h2> <p class="p-top__text"> 日本の文化に触れて頂き、日本をより好きになって頂き、お客様・従業員全てが笑顔になれるおもてなしを実現致します。<br /> 各種交通機関からのアクセスも良く、外国人観光客だけでなく、国内の家族旅行者など、<br /> 多くのお客様の観光拠点と旅行者とつなぐ場所として、快適で贅沢な空間を提供致します。<br /> 宿泊期間やご人数の関わらずご利用頂け、タイトなスケジュールになりがちなご予定も出来る限りサポートできるよう、<br /> チェックインやチェックアウトのお時間もご相談ください。<br /> さらに、長期滞在でもお楽しみ頂けるよう、様々なアクティビティーの実施も予定しております。 </p> </div> </article> <article class="p-top__container"> <div class="p-top__inner l-content-wrap-default"> <h2 class="p-top__title">area guide</h2> <div class="l-col2"> <div class="l-col2__list"> <img src="../src/asset/image/top_map.jpg" alt="" /> </div> <div class="l-col2__list"> <p class="p-top__text"> 各観光名所へもスムーズに<br /> アクセスできる好立地。<br /> 大阪を代表する観光名所や大阪の<br /> 見どころをご紹介。 </p> <div class="p-top__imgWrap"> <img src="../src/asset/image/top_areaguide_01.jpg" alt="" /> <img src="../src/asset/image/top_areaguide_02.jpg" alt="" /> <img src="../src/asset/image/top_areaguide_03.jpg" alt="" /> <img src="../src/asset/image/top_areaguide_04.jpg" alt="" /> </div> <a href="/areaguide/" class="p-top__btn">詳細はこちら</a> </div> </div> </div> </article> <article class="p-top__container"> <div class="p-top__inner l-content-wrap-default"> <h2 class="p-top__title">room</h2> <div class="l-col3"> <div class="l-col3__list"> <img src="../src/asset/image/room_01.jpg" alt="" /> <h3 class="p-top__subtitle">sweet room</h3> <p>雰囲気漂うプライベート空間。心地よく安らぎへと誘います。</p> </div> <div class="l-col3__list"> <img src="../src/asset/image/room_02.jpg" alt="" /> <h3 class="p-top__subtitle">deluxe room</h3> <p>雰囲気漂うプライベート空間。心地よく安らぎへと誘います。</p> </div> <div class="l-col3__list"> <img src="../src/asset/image/room_03.jpg" alt="" /> <h3 class="p-top__subtitle">standard room</h3> <p>雰囲気漂うプライベート空間。心地よく安らぎへと誘います。</p> </div> </div> <a href="/room/" class="p-top__btn p-top__btn--secondary">詳細はこちら</a> </div> </article> <article class="p-top__container"> <div class="p-top__inner l-content-wrap-default"> <div class="l-col2"> <div class="l-col2__list"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3280.083461557608!2d135.49308241523244!3d34.703074780433894!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e68dc5241021%3A0x4c619b45cc7f0e19!2z44CSNTMwLTAwMDEg5aSn6Ziq5bqc5aSn6Ziq5biC5YyX5Yy65qKF55Sw77yT5LiB55uu77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1599311883467!5m2!1sja!2sjp" width="600" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> </div> <div class="l-col2__list"> <h2 class="p-top__title">access</h2> <p class="p-top__text"> 〒530-0001 大阪市北区梅田3丁目1番1号<br /> TEL.06-1234-5678(代) </p> <a href="/access/" class="p-top__btn">詳細はこちら</a> </div> </div> </div> </article> </main> <%- include('./_includes/_footer.ejs') %> </body>
CSSが、
.p-top {
&__mv {
width: 100%;
height: calc(100vh - 80px);
margin-top: 80px;
background-image: url(../../asset/image/mv.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
&__container {
display: block;
margin-bottom: 50px;
padding: 60px 0;
&:nth-of-type(3) { background-color: #FFFFF9; } @include sp-layout() { padding: 30px 0; height: 750px; text-align: center; }
}
&__title {
margin-top: 10px;
margin-bottom: 60px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
@include sp-layout() { margin-bottom: 30px; }
}
&__subtitle {
text-transform: uppercase;
@include font-size(18);
}
&__text {
text-align: center;
line-height: 2.5;
font-size: 16px;
@include sp-layout { font-size: 100px; }
}
&__imgWrap {
margin-top: 30px;
display: flex;
justify-content: space-between;
& img { width: 23%; }
}
&__btnWrap {
width: 100%;
}
&__btn {
width: 100%;
margin-top: 40px;
margin-bottom: 30px;
padding: 0.6em 2em;
display: block;
color: $color-light;
text-align: center;
background-color: rgba($color-primary, 1);
@include sp-layout() { margin-top: 20px; } &--secondary { max-width: 400px; margin-left: auto; margin-right: auto; &:before { background-image: url(/asset/image/login.svg); } }
}
&__note,
&__note a {
@include font-size(14);
}
&-imgWrap{
margin-top: 30px;
display: flex;
justify-content: space-between;
}
}
iframe {
width: 100%;
}
.l-col2{
display: flex;
justify-content: space-between;
@include sp-layout { display: block; }
&__list {
display: block;
height: 100%;
width: 45%;
float: left;
margin-right: 30px;
}
}
.l-col3{
display: flex;
justify-content: space-between;
&__list{
width: 30%;
}
}
これです
よろしくおねがいします
もっと最小限のコードで試されては
返信ありがとうございます
夕方に修正します
あともう一点。
今回は見た目（フロントエンド、CSS）の部分での質問なので、
Ruby On Railsも使っているなら、
元のソースコードではなく、ブラウザに出力されたHTMLの方を記載した方がいいです。
サーバーサイドの元ソースコードだと、回答者側の検証が更に困難になります。
自己解決
