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

Open in your IDE?
  1. <style>
  2.     .line_consultation {
  3.         display: flex;
  4.         flex-wrap: wrap;
  5.         justify-content: center;
  6.         align-items: center;
  7.         gap: 10px;
  8.         margin: 20px auto;
  9.         max-width: 1260px;
  10.         width: 100%;
  11.         box-sizing: border-box;
  12.         padding: 0 10px;
  13.         overflow: hidden;
  14.     }
  15.     .line_consultation a {
  16.         display: block;
  17.         flex: 1 1 0;
  18.         min-width: 0;
  19.         max-width: 100%;
  20.     }
  21.     .line_consultation img {
  22.         display: block;
  23.         width: 100% !important;
  24.         height: auto;
  25.         max-width: 100%;
  26.     }
  28.     /* Tablet (768-1199px): stay side-by-side but flex-shrink properly */
  29.     @media (min-width: 768px) and (max-width: 1199px) {
  30.         .line_consultation {
  31.             gap: 8px;
  32.             padding: 0 16px;
  33.         }
  34.     }
  36.     @media (max-width: 767px) {
  37.         .line_consultation {
  38.             flex-direction: column;
  39.         }
  40.         .line_consultation a {
  41.             width: 80%;
  42.             margin: 0 auto;
  43.         }
  44.         .line_consultation img {
  45.             max-width: 100%;
  46.         }
  47.     }
  48. </style>
  50. <div class="line_consultation">
  51.     <a href="/user_data/line_consultation"><img src="/html/user_data/assets/img/line.png" alt="LINE相談"></a>
  52.     <a href="/user_data/window_renovation"><img src="/html/user_data/assets/img/plus_hojo.png" alt="先進的窓リノベ補助金"></a>
  53. </div>