app/template/default/Block/content_left_img.twig line 1

Open in your IDE?
  1. <style>
  2. /*全てに適用*/    
  3.     .l_items_default{
  4.         margin-bottom: 50px;
  5.     }    
  6. .d_item_name2{
  7.     font-size: 24px;
  8.     padding: 5px 0;
  10.     margin-bottom: 13px;
  11.     color: #2e6faf;
  12.     font-weight: bold;
  13.     }
  14.     .img_left{
  15.         float: left; 
  16.         margin-right: 30px;
  17.         
  18.     }
  19.     .btn_txt{
  20.         background-color: #439acf;
  21.         padding: 10px 10px;
  22.         width: 150px;
  23.         color:#FFFFFF;
  24.         text-align: center;
  25.         margin: 0 25px 0 0;
  26.         float: left;
  27.         line-height: 1.5;
  28.     }        
  29. .l_item_btn {
  30.         display: block;
  31.         /*width: 55%;*/
  32.         text-align: center;
  33.         margin: 10px auto 0;
  34.         padding: 5px 5px;
  35.         -webkit-border-radius: 20px;    /* Safari,Google Chrome */
  36.         -moz-border-radius: 20px;   /* Firefox */
  37.         border-radius: 20px;  
  38.         border: 1px solid #000;
  39.         margin: 10px 10px 0 0;
  40.         position: relative;
  41.         top: 36px;
  42.     }
  44. }
  45.     
  46.     
  47. /*ウィンドウ幅が767px以上の場合に適用*/
  48. @media screen and (min-width: 767px) { 
  49.     .img_left{
  50.         float: left; 
  51.         margin-right: 30px;
  52.     }
  53.         
  55.     
  56.     
  57.     }
  58. /*ウィンドウ幅が最大767pxまでの場合に適用*/
  59. @media screen and (max-width: 767px) { 
  60.     
  61.     .img_left{
  62.         width: 100%;
  63.         float: none; 
  64.         margin-right: 0px;
  65.         padding: 0 10px;
  66.     }
  67.     .img_width{
  68.         width: 100%
  69.     
  70.     }
  71. .d_item_name2{
  72.     font-size: 24px;
  73.     padding: 10px 0 0 10px;
  75.     margin-bottom: 13px;
  76.     color: #2e6faf;
  77.     font-weight: bold;
  78.     }
  80.     .content-text{
  81.         padding: 0 10px;
  82.     }
  83.     
  84.     .btn_txt{
  85.         background-color: #439acf;
  86.         padding: 10px 10px;
  87.         width: 44%;
  88.         color:#FFFFFF;
  89.         text-align: center;
  90.         margin: 0 3%;
  91.         float: left;
  92.         line-height: 1.5;
  93.     }        
  94.     
  95. .l_item_btn {
  96.         display: block;
  97.         width: 95%;
  98.         text-align: center;
  99.         margin: 10px auto 0;
  100.         padding: 15px 0;
  101.         -webkit-border-radius: 20px;    /* Safari,Google Chrome */
  102.         -moz-border-radius: 20px;   /* Firefox */
  103.         border-radius: 20px;  
  104.         border: 1px solid #000;
  105.         margin:10px auto;
  106.         position: relative;
  107.         top: 18px;
  108.     }
  110.     
  111.     }
  113. </style>
  116. <div class="l_items_default">
  117.         <div class="img_left">
  118.           <img src="/html/user_data/img/img1.jpg" alt="" class="img_width">
  119.         </div>
  120.         <h2 class="d_item_name2">Aquaextra EXCT</h2>
  121.         <div class="txt t_flexBox">
  122.           <div class="img_width">
  123.             <p class="content-text">バクテリア・ウイルス除去が可能なマルチピュア最上位モデル。大家族の方にもゆとりのファミリータイプの浄水器です。お料理の下ごしらえから飲料水までたっぷりお使いいただけます。</p>
  124.             
  125.             <div style="margin: 30px 0;">
  126.                 <p class="btn_txt">ご家族4人以上の<br />ファミリータイプ</p>
  127.                 <p class="btn_txt">1日の使用目安<br />46ℓ</p>
  128.                 <br style="clear: both;">
  129.             </div>  
  130.               
  131.             <a href="/products/detail/309" class="l_item_btn">この商品について詳しく</a>
  132.             
  133.             <a href="/items/aquaextra/" class="l_item_btn">Aquaextraシリーズについてはこちら</a>
  134.           </div>
  135.         </div>
  136.           <br style="clear: both;">
  137.       </div>