モバイル端末で商品バンドルのレイアウトを横並びから縦並びに変更する方法

この記事では、 製品バンドル割引要素 カスタムCSSを使用して、モバイルデバイス上で水平レイアウトから垂直レイアウトに変更します。

 ステップ1：カスタムコードエディタを開く

• GemPagesエディターで、 製品バンドル割引 要素。
• 要素を右クリックします。
• 選択 カスタムコード.

ステップ2：CSSコードを追加する

以下のCSSをコピーしてカスタムコードエディタに貼り付けてください。

@media (max-width: 767px) { .ElementClass gp-product-bundle-discount { display: flex; flex-direction: column; } }

ステップ3：要素クラスを置き換える

交換する .ElementClass 実際のCSSクラスで 製品バンドル割引 要素。

ステップ 4: 保存して公開する

• 詳しくはこちら Save.
• パブリッシュ あなたのページ。
• ライブページまたはプレビューを開いて、モバイルデバイスで製品バンドルが縦型レイアウトで表示されることを確認してください。