メインコンテンツへスキップ

テンプレート「DISCOVER」無料版の説明文の配置について

コメント

3件のコメント

  • 【カラーミーショップ】おみき

    カラーミーショップのおみきです。
    デザイナーさんにさくっと相談できたのできいてみました!
    (私も専門的な知識がなく、たまたまきくことができたので毎回このようなお答えができる約束ができないのですが…!)

    DISCOVERの左に余白があるようにみえるのは、カラーミーショップのレビュー機能用のためで、
    お客様からレビューをいただいたときにこのように配置されるようになっているからみたいでした。


    商品説明欄の幅を広げることで、レビューと商品説明が2列に並んでいるのが1列になるため(2カラムから1カラムになる)、その方法を以下記載しています。
    なので、もし、もとに戻したい場合は、以下の逆の手順を行ってください!

    1. 以下から display: flex; を削除する
      (コンテンツが2カラムになっているのを1カラムにする)
      .p-product-detail {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 75px;
      }
      2. 以下から width: 410px; を削除する
      (DETAILの横幅をコンテンツサイズに合わせる)
      .p-product-explain {
        width: 410px;
      }
      3. 以下から width: 530px; 、order: -1; を削除する
      (レビューが入る枠の幅や順序をリセットし、もしレビュー枠が表示される場合は上下によしなに配置されるようにする)
      .p-product-other {
        width: 530px;
        order: -1;
      }
    0
  • 山根 未来

    おみきさん
    とても丁寧なご回答を頂きありがとうございます。ユーチューブでいつも拝見しているのでコメント頂けて嬉しいです。早速やってみます!またなにかありましたらよろしくお願いします。

    0
  • 【カラーミーショップ】おみき

    Youtubeみていただいているのですね、うれしいです!!ありがとうございます!
    はい!ぜひお試しください😉

    0

サインインしてコメントを残してください。