• 解決済 Chanchan.

    (@eureka20080321)


    みなさま、いつも大変お世話になっております。

    テーマはbeauti_plusで、子テーマを作成してカスタマイズをしています。

    ヘルプの必要なページに画像を横に並べてあるのですが、ウェブブラウザーのsafariのレスポンシブ・デザイン・モードでページを確認すると、iphone6/7/8PLUSの画面サイズだけレイアウトがおかしくなってしまいます。
    現象としては、並べた画像(Apple Pay)の下に画像(キャッシュレス決済)が入り込み、文字が縦になってしまいます。

    画像を並べるのに使ったコードです。

    /*Apple Payをsquareの横に配置*/
    .container img.wp-image-1008{
    float: left;
    padding-right: 20px;
    padding-left: 0;
    padding-bottom: 10px;
    }
    
    /*画像の回り込みをクリア*/
    .container img.wp-image-1011{
    clear: both;
    }

    他の画面サイズだと大丈夫なのに、理由がわかりません。
    対策をどの様にすれば良いのか?
    どなたか教えていただけないでしょうか?

    どうかよろしくお願いします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • こんにちは

    [メディアと文章] ブロック(Apple Pay の後)の [追加 CSS クラス] に「clear」を追加、または、下記 CSS ではどうでしょうか?

    .wp-block-media-text {
    	clear: both;
    }
    トピック投稿者 Chanchan.

    (@eureka20080321)

    ishitakaさま。

    いつも大変お世話になっており、感謝いたしております。
    また、返信が遅くなり申し訳ございませんでした。

    教えていただいたコードで、表示が直りました。
    clearをかける部分は、clearをさせたいその物にかけると良いのでしょうか?

    相変わらず理由はわかりませんが、Apple Payの画像も、このiphone6/7/8PLUSの画面サイズだけ並びが少しおかしくなっています。

    これもclearで直るでしょうか?

    もう少しだけ教えていただけないでしょうか?
    よろしくお願いします。

    クラスの「clear」は、「clear: both;」(回り込みを解除)スタイルが適用されるだけです。
    参考ページ: http://www.htmq.com/style/clear.shtml

    トピック投稿者 Chanchan.

    (@eureka20080321)

    ishitakaさま。

    いただいたご回答を元に、色々とやってみたいと思います。
    本当にありがとうございました!

    トピック投稿者 Chanchan.

    (@eureka20080321)

    タイトルの問題点は教えていただき、ほぼ解決済みではありましたが、私なりに解決した内容を必要ないとは思いますが記しておきます。

    他の画面サイズでは問題が全くなかったのですが、どうしてもiphone6/7/8PLUSの画面サイズの時だけ、float: left;で並べたApple Payの画像が少し小さくなり、やや上にズレて表示されてしまっておりました。スペースに無理やり横並びで入り込んでいた感じでした。

    色々と実験を繰り返し、最終的に至った答えが「そもそもタブレット以下は、横並びに指定させた所で収まらず、縦並びになってしまうようだから並べなくていいや」でした。

    なので、タブレット以上で横並びとなるように指定してみました。

    /*Apple Payをsquareの横に配置*/
    @media screen and (min-width: 768px){
    .container img.wp-image-1008{
    float: left;
    box-sizing: border-box;
    padding-right: 20px;
    padding-left: 0;
    padding-bottom: 10px;
    }
    }

    こんな感じで、みなさまから今まで教わったコードをヒントにCSSに追記してみました。
    ※素人が考えたものですので、正解ではないと思います。

    結果として縦並びになったので、iphone6/7/8PLUSの画面サイズでおかしくなっていたズレの問題も解決しました!
    理由は未だにわかりませんが、希望していた形となりました。

    ishitakaさま、みなさま、いつもありがとうございます。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「iphone6/7/8PLUSの画面サイズ」には新たに返信することはできません。