会社概要ページのレイアウトについて

Question

いつもお世話になります。

布の但馬屋の伊藤です。

さて、

３９８０円送料無料に伴い、会社概要ページを編集しているのですが

ＰＣ・スマホとページレイアウトがうまくできません。

どうすればいいでしょうか？

https://www.rakuten.co.jp/tajima-ya/info.html


タグ




  
    
      ◆布の但馬屋実店舗のご案内
    
  



  
    
      長浜駅で電車を降りて、駅を背に伊吹山に向かって駅前通りを２・３分歩いていくと、お店の前には、西本町・黒壁スクエアのバス停がある布地のお店です。
      　当店は、創業６５年で、服地・布地・学校制服やユニフォームを扱っており、最近は、ちりめん布や和調木綿、和雑貨のお土産も観光客の方に大変ご好評をいただいております。
      
      
    
    
      
      
    
  



  
    
      〒526-0059
      滋賀県長浜市元浜町７－３４
      ＴＥＬ：0749-62-5461
      ＦＡＸ：0749-63-1321
      
      営業時間：９:００～１９:００
      実店舗定休日：不定休
      ＷＥＢ定休日：日曜日
    
  



  
    
      
    
    
      ◆取扱商品・サービス 
      ・布地各種・ちりめん・裏地・芯地など 
      ・特殊生地(サテン・タフタ・フェルト・ベルベット・不織布・毛氈)

      ・学校制服(長浜高校・長浜北星高校・長浜農業高校・虎姫高校・長浜西中学校)
      
      ・学生服 (全国標準型男子学生服) 
      ・ユニフォーム(作業服・事務服・イベントジャンパーなど)

      ・ネーム刺しゅう
      ・和雑貨小物など
    
  



  
    
      
      
    
    
      
      
    
  



  
    
      
      こんにちは、布の但馬屋、店長の伊藤文雄です。
      ２００４年１月に楽天市場をオープンいたしました。
      滋賀・長浜の地場産業「ちりめん」に関連した和柄を中心にちりめんや和調木綿、和雑貨などをネット販売しております。
      お店は創業６７年で、私で２代目になります。

Answer

ECマスターズの中野です。

いただいたこちらのご質問ですが、
週明けに担当よりご回答いたしますので、
今しばらくお時間いただけると幸いです。

お待たせして申し訳ございませんが、
何卒よろしくお願いいたします。

Answer

ECマスターズの田中です。

具体的に、どのような部分がうまくいっておりませんでしょうか。
ひとまず、表組みによる画像の配置に絞って
お話をさせていただきます。

楽天市場の会社概要ページは
いわゆるレスポンシブデザインとなっており、
PC・スマホ、ともに同じソースを使って表示しております。

文章と画像を並べるレイアウトは、
スマートフォンの横幅が限られている以上、
どうしても、１行の文字数も限られ、
画像の表示サイズも小さくなってしまいます。

スタイルシート（にて、メディアクエリ）を利用して、
スマホで閲覧した時のみ、
表のセルを縦一列に表示するようにすると、
比較的整った見た目に改善することができます。

具体的な方法ですが、いただいたソースを

= この下の行から ====================

@media screen and (max-width: 640px) {
  .tblResp table  {
    width: 100%;
  }
  .tblResp table td {
    display: block;
    width: 100%;
  }
}


= この上の行まで ====================

と

= この下の行から ====================

= この上の行まで ====================

で囲んでいただき、
表示が改善されるか、ご確認いただきますようお願いします。