@yusuke-bsk

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

HTML&CSS PC→モバイル表示に変更すると、bodyタグの幅が1/3ほどになる

HTML&CSSの模写をしていました。
レスポンシブデザイン作成中
表示をPC→モバイル(960px以下)に切り替えると、bodyの幅がおかしくなります。
bodyにはCSSでプロパティは何も設定していません。

@media (max-width: 960px){
body { width: 100%;}

}
としてみても特に変わりませんでした。width: ;で設定するとその幅に変わりますが。初期値で100%になっていないのは何ででしょうか?

head>
meta charaset = "utf-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
link rel="stylesheet" href="index.css">
link rel="stylesheet" href="index2.css">
link rel="icon" href="pic/favicon.ico">
title>ランディングページを活用したマーケティング戦略なら株式会社FREE WEB HOPE
/head>


</div>

<div class="header-inner">
  <div class="header-top">
    <div class="header-left">
      <img src="pic/logo.png" alt="ロゴです">
    </div>

    <div class="header-right">
      <a href="" class="tel">TEL:03-3525-8971</a>
      <a href="" class="mark-info">集客のご相談はこちら</a>
    </div>


  </div>

  <div class="key-words">
    <img src="pic/mv_hl01_pc.png" alt="いい戦略いいコピーいいデザインランディングページならfreewebhope">
  </div>

  <div class="performance-fv">
    <img src="pic/mv_point02_pc.png" alt="業界問わず年間100本の制作・運用">
  </div>

  <div class="application-info">
    <a href="#"><img src="pic/cta_btn.png" alt=" LP制作してみる"></a>
  </div>

</div>


  <div class="temporary-box">
    <img src="pic/performance_en.png" alt="">
    </div>
  </div>

  <div class="performance-inner">

    <div class="performance-contents">

     <h2>BtoBやBtoCを問わず</h2>
     <h1>年間100本の制作・運用</h1> 
      <p>BtoBやBtoCでもブランドイメージを落とさず
      <br>
      顧客獲得を実現する
     </p>

    </div>

    <div class="question">
      <ul>
        <li>現在運用しているランディングページの成果が悪い</li>
        <li>新たに制作をしたいがどう創っていいかわからない</li>
        <li>ブランドイメージを刷新したい</li>
        <li>依頼している代理店の対応に不満がある</li>
      </ul>

    </div>

    <div class="performance-img">
      <img src="pic/performance_loop.png" alt="成果物">
    </div>

    <div class="customer-voice"> <!--JSわからん-->
      <div customer-top>
        <h1>期待を超える成果にたくさんの喜びを頂いております</h1>

        <div ckass="customers-intro">

        </div>

      </div>
    </div>

    <section class="member">
      <div class="member-inner">
        <div class="member-logo">
          <img src="pic/member_en.png" alt="メンバー">
        </div>

        <div class="member-text">
          <p>お客様の期待を超えるために真面目に、しつこく</p>
          <h1>成果にこだわる仲間</h1>
        </div>

        <div class="memb-container">

          <img src="pic/member_pic01.jpg" alt="" >
          <img src="pic/member_pic02.jpg" alt="" >
          <img src="pic/member_pic03.jpg" alt="" >
          <img src="pic/member_pic04.jpg" alt="" >
          <img src="pic/member_pic05.jpg" alt="" >
          <img src="pic/member_pic06.jpg" alt="" >
          <img src="pic/member_pic07.jpg" alt="" >
          <img src="pic/member_pic08.jpg" alt="" >
          <img src="pic/member_pic09.jpg" alt="" >
          <img src="pic/member_pic10.jpg" alt="" >

        </div>

      </div><!--member-inner-->

    </seciton><!--member-->

  </div><!--peformance-inner-->


 </div>

</div><!--bg-wrapper-->

<section class="appeal">
  <div class="appeal-inner">

    <img class="appeal-txt-img" src="pic/cta_txt01_pc.png" alt="">

    <img class="appeal-main-img" src="pic/cta_point.png" alt="">

    <a href=""><img src="pic/cta_btn.png" alt="" class="appeal-btn"></a>




  </div><!--appeal-inner-->
</section><!--appeal-->

<section class="specific">

  <div class="sp-temporary-box">
    <img src="pic/strong_en.png" alt="">
  </div>

  <div class="specific-wrapper">

    <div class="specific-title">
      <h1>マーケティング施策の企画から設計するため売れる
      <br>
      ランディングページが作れる</h1>
    </div>

    <div class="specific-contents">

      <div class="specific-content01">
        <div class="div-left01">

          <img src="pic/strong_01_num_pc.png" alt="">

          <div class="sp-txt-top01">
            <h2>売れるページにする</h2>
            <h1>段違いの企画を提案</h1>
          </div><!--top-->

          <div class="sp-txt-down01">
            <p>ビジネスモデルの理解、エンド顧客の理解はもちろんのこと、商品だけにフォーカスするのではなくでなくWEBマーケティング全体の視点からコンバージョンが取れるランディングページの戦略を設計します。</p>

            <p>ご提案→制作→広告運用→分析・改善が1つの会社で一貫しているので、目標がブレることがありません。
            </p>
          </div><!--down-->

        </div><!--div-left-->

        <div class="div-right01">
          <img src="pic/strong_01_pic01_pc.jpg" alt="">
        </div>

      </div><!--content01-->

      <div class="specific-content02">

        <div class=" sp-top02">

          <img src="pic/strong_02_num_pc.png" alt="">

        </div>

        <div class="specific-bottom02">
          <div class="sp-title02">
            <h2>9年間<span>あらゆる業種を経験</span></h2>
            <h1> 豊富な実績</h1>
          </div>
          <div class="sp-content02">
            <p>
              創業から業種業界を問わずLPを年間100本以上作ってきました。世の中のビジネスモデルは【BtoB】【BtoC】この中でも【物販】【サービス】さらにこの中でも【ストック型】【フロー型】に別れます。(BtoGなどもありますが、おおよそはということで・・)私達はこの8つのビジネスモデルを様々経験しております。例えば東証一部上場企業が提供するエンタープライズ向け製品や設立1年のスタートアップ企業の提供するC向けサブスクリプション商品など、経験の幅を強みとしております。
            </p>
          </div>
        </div>

      </div>
      <div class="specific-content03"></div>
      <div class="specific-content04"></div>
      <div class="specific-content05"></div>


    </div>

  </div><!--specific-box-->



</section>

<!--main-->


1 likes

1Answer

情報がもう少しあれば回答ができると思います。(どのような環境でPC→モバイルを変更しているか等)

こちらで現象が発生するサンプルを作成していただくのも解決への近道になると思います。

0Like

Your answer might help someone💌