会員サイトをリニューアルしました! 新サイトはこちら

スマホでみるとレイアウトが崩れます < SWELLに関する質問

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

スマホでみるとレイアウトが崩れます
 
通知
すべてクリア

[解決済] スマホでみるとレイアウトが崩れます

12 投稿
3 ユーザー
4 Likes
2,423 表示
Sarina
(@sarina)
Active Member
Topic starter
 

表記の件ですが、

スマホでみるとレイアウトが崩れます

インスタやYouTube、Twitterを埋め込んでいるからでしょうか?

対処方法が知りたいです。

よろしくお願いします

たとえば、こちらのページです。 https://free-eiga.com/friday-roadshow2020.html

This topic was modified 4年前 by Sarina
 
投稿済 : 31/05/2020 4:39 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

すみません、パッとみた感じ崩れてるようには見えなかったのですが、どこが崩れていますか?

 
投稿済 : 31/05/2020 5:00 am
つぶ
(@tbshiki)
Estimable Member
 

こんにちは。

https://free-eiga.com/storyofmylife.html

一部記事ページが崩れているみたいです💦

SWELLのバージョンは最新バージョンでしょうか?

tableやifameでwidthが大きすぎる指定になっていないかご確認お願いします。

また、検証が難しくなるので解決までの間だけでも右クリック拒否のスクリプトを外していただけるとうれしいです😂
よろしくお願いします!

 
投稿済 : 31/05/2020 5:07 am
Sarina
(@sarina)
Active Member
Topic starter
 

@ryoこんな感じです

 
投稿済 : 31/05/2020 6:20 am
Sarina
(@sarina)
Active Member
Topic starter
 

@tbshikiこちら、バージョンは最新にして、特別、HTML は触ってないんです💦 右クリック訂正しておきます

 
投稿済 : 31/05/2020 6:22 am
Sarina
(@sarina)
Active Member
Topic starter
 

あと、私のスマホから見た問題だけでなく、Googleサーチコンソールからも、「モバイルユーザビリティの問題が新たに検出されました」と連絡が来たので、なにかしら問題はあるのかなと思ってます。

 
投稿済 : 31/05/2020 6:28 am
つぶ
(@tbshiki)
Estimable Member
 

細かい解決方法までちょっとわからないのですが、同じ条件を再現することができました。

世界的大ベストセラー、ルイザ・メイ・オルコットの自伝的小説「若草物語」が原作のこの映画では、
四姉妹のそれぞれの成長の様子を見ることができます。

こちらの文章が整形済みブロックで構築されているので、段落ブロックに変更していただけるとこの状況を一旦回避できると思いますので試していただきたいです。

@ryo さん
Twitter埋め込みやInstagram埋め込みブロックと整形済みテキストを同一ページで使うと改行までのテキストの長さ分のwidthで表示されるみたいです(; ・`ω・´)

This post was modified 4年前 by つぶ
 
投稿済 : 31/05/2020 6:52 am
Sarina
(@sarina)
Active Member
Topic starter
 

@tbshikiつぶさん ありがとうございます!試してみます。たくさんあるので、すぐには、全部できなさそうですが、終わったらまた報告します。

 
投稿済 : 31/05/2020 6:56 am
つぶ reacted
Sarina
(@sarina)
Active Member
Topic starter
 

ありがとうございます。こちら、ブロックを変更したらレイアウトがなおりました。素人で、詳しいことが分からないので、しばらくは「段落ブロック」を使うことにします。ご丁寧に、ありがとうございました!

 
投稿済 : 31/05/2020 7:03 am
つぶ reacted
つぶ
(@tbshiki)
Estimable Member
 

ありがとうございます!

修正頑張ってください。゚(゚´Д`゚)゚。

@ryo さん

SNS埋め込みなくても再現したと報告しようと思ったのですが
整形済みテキストブロックで使われる<pre>タグの仕様なんですね💦
<pre>使ったことなかったので全く知りませんでしたすいません😭

 
投稿済 : 31/05/2020 7:05 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

すみません、現象確認できました。
<pre>タグは本来、コンテンツからはみ出る分はスクロール可能になるような状態が一般的なのですが、
スクロール状態にならずにはみ出すようになってしまっていたようです。

次回アップデートで修正しておきます。

ただし、本文を<pre>タグで書くというのは普通の使い方ではないため、どのみち普通の段落ブロックへのリライト作業は必要になってくるかと思います...!

 
投稿済 : 31/05/2020 7:46 am
つぶ reacted
Sarina
(@sarina)
Active Member
Topic starter
 

@ryoわかりました!私の使い方が間違っていたのですねー😭 お手数おかけしました。すべて修正できて、ホッとしています。ありがとうございました。

 
投稿済 : 31/05/2020 8:38 am
つぶ reacted
共有: