bubbles correction

MaxNadeev · Mar 12, 2024 · 7240a67 · 7240a67
1 parent c867618
commit 7240a67
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -5,12 +5,12 @@
     <meta name="viewport" content="initial-scale=1.0">
     <script src="scripts/ya.js"></script>
     <noscript><div><img src="https://mc.yandex.ru/watch/96480520" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
-    <link rel="stylesheet" href="style.css?version=2">
+    <link rel="stylesheet" href="style.css?version=3">
     <script src="scripts/script.js?version=2" defer></script>
     <script src="./scripts/prices.js" defer></script>
     <title>Сочисто! | Уборка квартир в Сочи</title>
     <link rel="icon" href="img/favicon.jpg">
-    <script src="scripts/bubbles.js?version=1" defer></script>
+    <script src="scripts/bubbles.js?version=3" defer></script>
 
 </head>
 <body>

diff --git a/scripts/bubbles.js b/scripts/bubbles.js
@@ -1,4 +1,4 @@
-var screenWidth = window.innerWidth;
+var screenWidth = 720;
 var roundedScreenWidth = Math.round(screenWidth / 100) * 100;
 let number = roundedScreenWidth / 40;
 

diff --git a/style.css b/style.css
@@ -375,10 +375,22 @@ small{
 .bubble-container svg {
 	background-color: #00000000;
     margin: -136px 0 -42px;
-    width: 720px;
+    width: 100%;
+    max-width: 720px;
     height: 175px;
     position: absolute;
-    left: calc(50% - 360px);
+}
+
+@media (width > 720px){
+    .bubble-container svg {
+        left: calc(50% - 360px);
+    }
+}
+
+@media (width <= 720px){
+    .bubble-container svg {
+        left: 0;
+    }
 }
 
 circle{