1. HOME
  2. ブログ
  3. よくあるご質問
  4. レスポンシブ対応(スマホなどのモバイル端末に対応)していますか?

レスポンシブ対応(スマホなどのモバイル端末に対応)していますか?

はい、パソコン、スマホ、タブレット等、各デバイスで使用できます。

デザインシミュレーター画面や商品ページ以外のサイトオーナー様で追加したページは、
メディアクエリ等を使用し、「ページテーマ」のTwig欄にCSS(HTML)記入して、
各デバイス向けにデザインをして頂くことができます。

※ HTMLやCSSに関する技術的なサポートは実施しておりませんので、サイトオーナー様ご自身でメンテナンスをお願いいたします。

コード例「画面幅959px以下では3列、幅480px以下では2列にする」
(細かな数値などは適宜調整ください。)

@media screen and (max-width: 959px) {
    .mcPage__itemListContent-grid .itemListContent__grid {
        flex: 0 1 33.3333%;
    }
    }

@media screen and (max-width: 480px) {
        .mcPage__itemListContent-slide .swiper-wrapper {
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .mcPage__itemListContents-slide .swiper-slide {
            text-align: center;
            padding-left: 10px;
            padding-bottom: 30px;
            display: block;
            flex: 0 0 47%;
            margin-right: 0 !important;
        }
        .mcPage__itemListContent-grid .itemListContent__gridArea {
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .mcPage__itemListContent-grid .itemListContent__grid {
            text-align: center;
            /* padding-left: 10px; */
            padding-bottom: 30px;
            display: block;
            flex: 0 0 47%;
        }
}

 
 
 

 HTMLやCSSに関する技術的なサポートは実施しておりませんので、サイトオーナー様ご自身でメンテナンスをお願いいたします。

※不適切なコードを保存した場合、
 管理画面にログインできなくなるなど意図しない結果になる可能性があります。
 HTML/CSSをカスタマイズする上で以下を実行することをおすすめします。

・ログアウトする前にシークレットモード等でログインの動作確認を試す
・エディタでHTMLを編集し、ミスがないかチェックした上でmakertownに保存する
・意図しない結果になった場合に備えて、元のHTMLをコピーまたはファイルに保存して戻せる状態にしておく

関連記事

「使い方」検索

「使い方」カテゴリ