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

Open in your IDE?
  1. <style>
  2. /*全てに適用*/    
  3. .gnavi_item_list a {
  4.     display: inline-block;
  5.     box-sizing: border-box;
  6.     text-align: center;
  7.     background-color: #1266ac;
  8.     color: #fff;
  9.     padding: 10px 0;
  10.     width: 100%;
  11. }
  13. .gnavi-shelfGrid{
  14.   display: flex;
  15.   margin-left: 0;
  16.   margin-right: 0;
  17.   flex-wrap: wrap;
  18.   padding: 0;
  19.   list-style: none;
  20. }
  22. .gnavi-shelfGrid .gnavi-shelfGrid__item {
  23.     /*padding: 0 1px;*/
  24.     padding-top: 0px;
  25.     padding-bottom: 1px;
  26.     padding-left: 0px;
  27.     padding-right: 1px;
  28. }
  30. .gnavi-shelfGrid .gnavi-shelfGrid__item {
  31.     /*margin-bottom: 1px;*/
  32.     width: 50%;
  33.     display: -ms-flexbox;
  34.     display: flex;
  35.     -ms-flex-direction: column;
  36.         flex-direction: column; 
  37. }
  38.         
  39. /*ウィンドウ幅が最大767pxまでの場合に適用*/
  40. @media only screen and (min-width: 768px){
  41.     .gnavi-shelfGrid .gnavi-shelfGrid__item{
  42.         padding-top: 0px;
  43.         padding-bottom: 1px;
  44.         padding-left: 0px;
  45.         padding-right: 1px;
  46.         width: 25%;
  47.     }
  48. }
  50. /*ウィンドウ幅が767px以上の場合に適用*/
  51. @media screen and (min-width: 767px) { 
  52.     }
  53. /*ウィンドウ幅が最大767pxまでの場合に適用*/
  54. @media screen and (max-width: 767px) { 
  55.     }
  56.     
  58. </style>
  60. <div class="gnavi_item_list">
  61.    <ul class="gnavi-shelfGrid">
  62.         <li class="gnavi-shelfGrid__item">
  63.             <a href="/products/list?category_id=40">カウンタートップ浄水器</a>
  64.         </li>
  65.         <li class="gnavi-shelfGrid__item">
  66.             <a href="/products/list?category_id=41">ビルトイン浄水器</a>
  67.         </li>
  68.         <li class="gnavi-shelfGrid__item">
  69.             <a href="/products/list?category_id=44">カートリッジ</a>
  70.         </li>
  71.         <li class="gnavi-shelfGrid__item">
  72.             <a href="/products/list?category_id=10">部品</a>
  73.         </li>
  74.     </ul>
  75. </div>
  77. {#<style>#}
  78. {#/*全てに適用*/    #}
  79. {#    .l_item_list a {#}
  80. {#        display: inline-block;#}
  81. {#        box-sizing: border-box;#}
  82. {#        text-align: center;#}
  83. {#        background-color: #1266ac;#}
  84. {#        color: #fff;#}
  85. {#        padding: 10px 0;#}
  86. {#        width: calc(100% / 3);#}
  87. {#    }#}
  88. {#    .l_item_list a:nth-child(2) {#}
  89. {#        border-right: 1px solid #fff;#}
  90. {#        border-left: 1px solid #fff;#}
  91. {#    }        #}
  93.         
  94. {#/*ウィンドウ幅が767px以上の場合に適用*/#}
  95. {#@media screen and (min-width: 767px) { #}
  96. {#    }#}
  97. {#/*ウィンドウ幅が最大767pxまでの場合に適用*/#}
  98. {#@media screen and (max-width: 767px) { #}
  100. {#    }#}
  102. {#</style>#}
  105. {#<div class="l_item_list">#}
  106. {#    <a href="/products/list?category_id=1">浄水器本体</a><a href="/products/list?category_id=44">カートリッジ</a><a href="/products/list?category_id=10">部品</a>#}
  107.     {#<a href="/products/list?category_id=40">カウンタートップ浄水器</a>#}
  108.     {#<a href="/products/list?category_id=41">ビルトイン浄水器</a>#}
  109.     {#<a href="/products/list?category_id=44">カートリッジ</a>#}
  110.     {#<a href="/products/list?category_id=10">部品</a>#}
  111. {#</div>#}