名無しの旅人
2021/05/30 (日) 08:02:10
572f4@c2ee0
トップページがflex-containeの仕様変更か不具合なのか、space-betweenで正常に配置できない状態になっている問題について、とりあえず力技で間に空白のflex-boxを差し込むことで見出しが被らないように間隔を空けてみました。問題があれば別の方法に変えて問題ありません。(先に気づいて試行錯誤なさっている方に報告)
通報 ...
ありがとうございます。どうにも上手くいかず途方に暮れていたので、大変助かりました。モバイル(スマホサイズ)だと気持ち少しだけ表示が崩れるようですが、現時点でベストな方法だと思います。
またzawazawaのWIKIWIKIユーザー助け合い掲示板にトピックを立ててきました(問い合わせの方がいいかな?)。ひとつのwikiのためだけに運営が対応してくださるかは未知数ですが、報告まで。
あいや「見出しが被る」不具合であれば、もしかすると少し幅の広いモバイル表示(タブレットサイズ)で起こる不具合でしょうか…。私が直面した不具合はデスクトップ表示の状態下でしたが、モバイル表示の状態下でも先頃のレスポンシブ化の影響でまた別の不具合があるのですね
いえ、自分もデスクトップです。space-betweenだとなぜか実際の幅より幅広にスペースを取った上で等間隔配置されてしまい横スクロールが発生するので、space-betweenを止めるという手しかなかった訳です。
元々space-betweenを使っていたのが、左詰めだと見出しが被ってしまうためだったので、それを出来なくなったので別の対処が必要だった、というところです。
把握しました(早とちりしていました)。なんとも如何ともしがたいので、このまま様子見ですかね。なにか妙案を思いつかれましたらよろしくお願いします。
space-aroundにしてみたんですが、いかがでしょうか。スマホで表示すると妙に真ん中に寄ってる感じになってしまうんですが、妥協点としてはいい感じなんじゃないかと。ダメそうならロールバックしてください
ちなみにこの件の原因についてですが、
・space-betweenで横スクロールが発生する原因 ⇒ h2とかに謎についてるmargin-right: -19px;のせいで、右に19pxはみ出してるから
・左詰めだと見出しが被ってしまう理由 ⇒ h2とかに謎についてるmargin-left: -19px;のせいで、左に19pxずれているから
・space-betweenが最適なのか ⇒ 普通に左詰めにして、各boxの右側に余白をつけたいが、wikiwikiのプラグインの引数にそれが無い。のでspace-aroundで妥協
といったところでしょうか
すばらしいです。スマホで真ん中に寄りこそしますが、縦位置が揃っているため安定感があっていいと思います。
戦力になれず作業ほとんどお任せしてしまいまいすみません。お疲れさまでした!