モバイルビューで確認すると表が崩れてしまいます

2019年2月13日 at 6:35

いつもお世話になっております。

通常だと問題ないのですが、モバイルビューで確認しますと添付画像のようにページが崩れてしまいます。(レスポンシブ対応のテーマ【fundamental】を使用しております。)
ページレイアウトにて表を横に割ったのち、記事ブロックにて作成しております。
重なりをなくす手立てはなにかございますでしょうか。
それか、いっそiPad時にはPC画面表示にしようかと思うのですがそういった方法はございますでしょうか。

もしお分かりになる方がいらっしゃいましたらよろしくお願いいたします。

タグ:

Re: モバイルビューで確認すると表が崩れてしまいます

2019年2月13日 at 11:17
質問をされるときはご自分の環境、使用サーバ、concrete5のヴァージョン、使用テーマ等を書いたほうがいいですよ。
また、どの様に表示したいかを画像にすると解決の方法がわかりやすくなると思います。
 

Re: モバイルビューで確認すると表が崩れてしまいます

2019年2月17日 at 20:28
返信が遅くなってしまい大変申し訳ございません。
気づくのが遅れてしまい、、失礼いたしました。
ご指摘いただきありがとうございます。

環境は、以下になります。
# concrete5 Version
Core Version - 8.4.3
Version Installed - 8.4.3
Database Version - 20180716000000# concrete5 Version
Core Version - 8.4.3
Version Installed - 8.4.3
Database Version - 20180716000000
# concrete5 Version
Core Version - 8.4.3
Version Installed - 8.4.3
Database Version - 20180716000000

# PHP Version
7.2.6

サーバーはXサーバーを使用しております。

次回からは、しっかり記載させていただきます。
ありがとうございます。
 

Re: モバイルビューで確認すると表が崩れてしまいます

2019年2月14日 at 10:36
Fundamentalテンプレートを使ったことがないのと、いただいた内容から判断できる部分が少ないので、正しいことをお伝えできるかわかりませんが、添付の画像を見る限り、CSSで対応できそうな感じですね。

「ページレイアウトにて表を横に割ったのち、記事ブロックにて」の部分ですが、レイアウトを追加で2つの領域を作り、その2つにそれぞれ記事ブロックを追加したということでしょうか?

そして、記事ブロックで表(テーブル)を合計3つ作ったという感じでしょうか?



上記の内容で進めたと仮定して、話を進めます。

表(テーブル)を作るところで、表のプロパティというダイアログが表示されると思いますが、その中に「幅」という項目があり、デフォルトで500pxとか入っているかもしれません。

表(テーブル)を作ったあとの場合は、内容を編集できる状態で表(テーブル)の上で右クリックすると、「表のプロパティ」という項目が出てくるので、それを選択してください。

先ほどの「幅」の項目がもし、「500px」になっていたならば、その内容を「100%」とかに変更すれば、表の横幅は画面サイズに合わせて伸び縮みし、重なることはなくなると思います。

もし、CSSがわかれば、記事ブロックの「ソース」からでも同様の修正は可能です。



また、iPadとPCでの表示の話ですが、レスポンシブWebデザイン対応のテーマということなので、表示に関してはそのテーマのCSSの内容次第になるかと思います。
 

Re: Re: モバイルビューで確認すると表が崩れてしまいます

2019年2月17日 at 20:40
返信が遅くなってしまい大変申し訳ございません。
アドバイスいただき誠にありがとうございます!

お話いただいた仮定そのものでした。
表のプロパティ→pxで表示されていた部分を100%にし、全体のバランスを整えることで解決できました。ソースはそのような使い方もできるのですね。
CSSは、少し勉強しましたがまだ駆け出しのため扱いが難しく、、今後はもっと覚えていきたいと思います。
PC表示はテーマの問題なのですね。勉強になります。

とても助かりました。ありがとうございます!