320pxのレスポンシブ対応

フォーラム 使い方全般 320pxのレスポンシブ対応

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

    Welcart basicを使用していますが、320pxで表示した際に、カート情報確認ページの
    商品名の横幅が狭くなり必要以上に文字の折り返しが発生しております。

    こちらの編集方法をご教示頂けないでしょうか?

    #89865
    ohnishi
    キーマスター

    こんにちは

    Welcart Basic の子テーマを作成いただき、
    子テーマ内のCSS にメディアクエリ(320px未満)を記載して修正するような形になるかと思います。

    
    @media screen and (max-width: 320px) {
    	.cart_navi {
    		background: ....;
    	}
    }
    
    #89870
    dabo1031
    参加者

    ohnishi様

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

    言葉足らずで申し訳ございませんでした。

    ・Welcart Basic の子テーマを作成
    ・子テーマ内のCSSにメディアクエリ(320px未満)を記載
    ・「wc_cart_page.php」の「<th class=”productname”><?php _e(‘item name’,’usces’); ?></th>」が
     該当箇所だと思いその部分を変更

    までは実施いたしました。

    実際に「style.css」に仮で下記のコードを記入すると背景色が変更されるところまでは
    確認しております。

    .productname {
    background-color: #00B900;
    }

    しかし、ここから幅の修正が出来なかったのため、この部分の幅の修正方法をお聞きしたかったです。
    変更したい箇所を示した画像を添付させて頂きます。

    ご意見いただけると幸甚です。

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

    min-width を使用してみてはいかがでしょうか。
    min-width は、要素の最小幅を設定することができます。

    
    .productname {
    	min-width: 100px;
    }
    
    

    などで変更できないでしょうか。

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