トップページのWelcartカレンダー表示について

フォーラム テンプレート(テーマ) トップページのWelcartカレンダー表示について

  • このトピックには2件の返信、2人の参加者があり、最後にSaKoにより3年、 9ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #90349
    SaKo
    参加者

    ——————————————–
    WordPress のバージョン:5.4.2
    Welcart のバージョン:1.9.30
    PHP のバージョン:7.3.19
    Welcart専用の拡張プラグイン:SKU Select、Multi Price、Yamato Credit
    ご利用のテーマ:Beldad
    症状を確認したブラウザ:Firefox、Chrome
    サーバー:さくらインターネット
    SSLの利用:常時SSL
    ——————————————–

    お世話になります。

    ウィジェットを使って、トップページにWelcartカレンダーを設定しています。

    [設置場所]
    管理画面 > 外観 > カスタマイズ > ウィジェット > ホーム|商品リスト下部 > Welcartカレンダー

    現状はPCで見ると、添付画像のように、2ヶ月分がタテ並びで表示されます。
    タブレットで見ると、2ヶ月分がヨコ並びで表示されます。

    PC表示もタブレットと同じように、2ヶ月分をヨコ並びで表示させるには、どのようにしたらよいですか?

    ご教示いただけると幸いです。よろしくお願いします。

    Attachments:
    You must be logged in to view attached files.
    #90353
    ohnishi
    キーマスター

    こんにちは

    Welcart Basic 含め、Basic の子テーマ(Beldad)は、スマホ→タブレット→PC という形でレスポンシブデザインにて作成しております。
    Google Chrome に付属している「要素検証」を利用すると、
    どのCSSの何行目にどんなスタイルが効いているか確認することができます。
    PC表示の際にスタイル(表示内容)を変更しておりますので、
    そちらのスタイルを適用させなく(削除)すれば、
    PC閲覧時にもタブレットと同じ形で表示することが可能です。

    #90367
    SaKo
    参加者

    ありがとうございます。

    不慣れで時間がかかってしましましたが、該当箇所を見つけることができました。

    style.css
    @media screen and (min-width: 62.5em) {
     :
    /* — table — */
    .widget_welcart_calendar table, ←この1行を削除したら実現できました。
    .widget_calendar table,
    .welcart_blog_calendar table {
    float: none;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    }

    ありがとうございました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。