Merge pull request #3 from wirenboard/bugfix/small-resolution

fix iphone se resolution

assets/css/globals.css

@@ -17,6 +17,10 @@ main {
   @media (max-width: 1024px) {
     padding: 0 20px;
   }
+
+  @media (max-width: 290px) {
+    padding: 0 12px;
+  }
 }
 
 article {
@@ -49,6 +53,11 @@ h2 {
   @media (max-width: 620px) {
     text-align: left;
   }
+
+  @media (max-width: 290px) {
+    font-size: 28px;
+    margin-top: 16px;
+  }
 }
 
 button {
@@ -81,10 +90,16 @@ details summary::-webkit-details-marker {
   filter: blur(70px);
   margin: -200px 150px 220px;
   opacity: 0.4;
-  width: 180px;
-  height: 180px;
+  width: 100%;
+  max-width: 180px;
+  height: 100%;
+  max-height: 180px;
   position: absolute;
   z-index: -1;
+
+  @media (max-width: 290px) {
+    display: none;
+  }
 }
 
 .spotlight-right {

nuxt.config.ts

@@ -41,6 +41,13 @@ export default defineNuxtConfig({
     '~/assets/css/variables.css',
     '~/assets/css/globals.css',
   ],
+  postcss: {
+    plugins: {
+      autoprefixer: {
+        overrideBrowserslist: ['last 4 versions', 'iOS >= 8']
+      }
+    }
+  },
   modules: [
     '@nuxtjs/google-fonts',
     'vue-yandex-maps/nuxt',

public/timepad.css

@@ -7,6 +7,10 @@ body {
     border: 1px solid #4d9f0c;
     padding: 16px 24px;
     border-radius: 36px;
+
+    @media (max-width: 290px) {
+        padding: 12px 0;
+    }
 }
 
 .b-registration__section,
@@ -45,6 +49,10 @@ body {
     @media (max-width: 600px) {
         font-size: 18px !important;
     }
+
+    @media (max-width: 290px) {
+        font-size: 16px !important;
+    }
 }
 
 .tpwf-loader-caption,

src/faq.vue

@@ -62,6 +62,10 @@
   @media (max-width: 620px) {
     padding: 16px 24px;
   }
+
+  @media (max-width: 290px) {
+    padding: 12px 16px;
+  }
 }
 
 .faq-details:not([open]) .faq-question:before {
@@ -91,6 +95,10 @@
   @media (max-width: 620px) {
     padding: 0 24px 16px;
   }
+
+  @media (max-width: 290px) {
+    padding: 12px 16px;
+  }
 }
 </style>
 <script setup lang="ts">

src/main.vue

@@ -3,7 +3,7 @@
     <time class="main-date" datetime="2025-17-04">17 – 18 апреля / Москва</time>
     <h1 class="main-title">WBCE 2025</h1>
     <p class="main-subtitle">Выставка и конференция по домашней<br /> и промышленной автоматизации</p>
-    <button @click="scrollToElementById('register')">Зарегистрироваться</button>
+    <button class="main-register" @click="scrollToElementById('register')">Зарегистрироваться</button>
     <p class="main-link">
       <img src="/assets/img/tg.svg" alt="">
       <a href="https://t.me/wbce2025" target="_blank">Подписывайтесь на Telegram-канал WBCE</a>
@@ -32,6 +32,10 @@
     padding: 24px;
     background: url("/assets/img/video_poster.jpg");
   }
+
+  @media (max-width: 290px) {
+    padding: 24px 18px;
+  }
 }
 
 .main-video {
@@ -83,6 +87,10 @@
     font-size: 16px;
     padding: 10px 12px;
   }
+
+  @media (max-width: 290px) {
+    font-size: 14px;
+  }
 }
 
 .main-title {
@@ -131,6 +139,11 @@
     margin-top: 6px;
     font-size: 16px;
   }
+
+  @media (max-width: 290px) {
+    font-size: 14px;
+    line-height: 20px;
+  }
 }
 
 .main-link {
@@ -142,5 +155,16 @@
   @media (max-width: 550px) {
     font-size: 16px;
   }
+
+  @media (max-width: 290px) {
+    font-size: 14px;
+  }
+}
+
+.main-register {
+  @media (max-width: 290px) {
+    font-size: 16px;
+    padding: 4px 16px;
+  }
 }
 </style>

src/members.vue

@@ -53,5 +53,9 @@
   @media (max-width: 470px) {
     max-width: 250px;
   }
+
+  @media (max-width: 290px) {
+    max-width: 160px;
+  }
 }
 </style>