スマホ用での表示時に右側に余白が出来てしまう

Question

前提・実現したいこと

横にスライド出来ないようにしたい

wordPressで制作を依頼していたのですが中途半端な状態で納品されていたので改良を頑張っているのですがPC版は思った通りなのですが
スマホ版がトップ画面より下で右側に余白が出来てしまうのです。
どのように直せるのか、原因が何なのかがわかりません..

発生している問題・エラーメッセージ

http://bmlabo.co.jp/

Comments

[kyoya0819]

そもそも縦スクロールができないのですが、
iPhone7 iOS13.3

[css_creater]

あれ、こちらでは出来るのですが...
一個設定戻してみます！

Answer 1

制作を依頼していたのですが中途半端な状態で納品されていたので改良を頑張っているのですが

あなたが頑張る必要はありません。
要件に含まれていることなのであれば、きちんとした完成品が納品されるまで突っ返してください。

Comments

[css_creater]

既に7回ほど訂正願いを出しましたが言ったとおりになりませんでしたので頭金のみで契約が終わったんですよね...

[m.ts10806]

その事情は知りませんが、やるべきことをやらないとか、傍目に明らかな不具合があるような状態で納品してくるところなのであれば、切るのも手です。
へたに自分で手を入れて手におえなくなるほうが損害としては大きいです。

何が言いたいかと言うと、質問サイトで解決できる領域ではありません…

[css_creater]

既に切りはしたのですが、データをバックアップ取ったうえでやっております。

年内に出来たらと思っていたため自分でやっていたのですがそこだけ原因がどうしてもわからなかったので質問してみましたがおっしゃる通りですね。

ありがとうございます。

[m.ts10806]

予算次第ですが引き受けてくれる外注を探した方が良さそうです。
とはいってもそもそも全く別のところが手掛けたのもあり、手を出したがるところがあるかどうかは不明なところはあります。
確かに面倒な展開は避けたいでしょうけど、「要件通りできていない」のをたてに支払った分の返金を要求するのもなくはないです(だから質問で解決できる範囲ではない…)

自分でできるようになるに越したことはないですが、WordPressでどこにどう手を入れたのか分からない状態だと、環境壊してしまってお手上げになることもありますからね。
本来はもともと対応した業者の責任なのですけど。

予算とスケジュールと自身のリソースを元にご検討ください

Answer 2

これが原因かもしれないっす。ここっす。

<span class="js-animation-text-content"><span class="js-animation-text-overlay" style="transform: translate(102%, 0%) matrix(1, 0, 0, 1, 0, 0);"></span>
<span class="js-animation-text-body" style="opacity: 1;">無限大の選択肢から<br class="br-sp">答えをさがす。</span></span>

上のコードに関して、親要素の関係で(親は同じ）横幅が265.50,縦幅が78.00になってました。それを横に並べてるので、溢れたんだと思います。
ちなみにそのほかの要素にも、文字の隣に318*50の要素があったり無駄なものが多すぎて。

.js-animation-text.js-animation-text-overlay

このクラスを消してあげるとぱっと見大丈夫になりました。
Chrome,developer toolsのiphone X,Pixel2で動作確認済み。

注意
上記のCSSに関して、.js-animation-text-overlayを消すだけで良いとしていましたが、そうすると同じ要素を持つ見出しの<span>タグのCSSと干渉してしまいましたので、訂正しました。

追記
結構格好いいサイトですけど、制作料いくら払ったんですか？