fix responsive elements sizes on mobile

riwert · Apr 4, 2024 · 3cce772 · 3cce772
1 parent 20a482e
commit 3cce772
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -74,22 +74,22 @@
   </head>
 
   <body class="font-sans antialiased text-gray-200 min-h-full h-auto flex items-center leading-normal tracking-wider">
-    <div class="max-w-4xl xl:max-w-5xl flex items-center min-h-full h-auto lg:h-screen flex-wrap mx-auto mt-36 mb-8 lg:my-0">
+    <div class="max-w-4xl xl:max-w-5xl flex items-center min-h-full h-auto lg:h-screen flex-wrap mx-auto mt-32 mb-8 lg:my-0">
 
       <!-- Background video or image -->
       <div id="video-container" class="opacity-0 transition-opacity ease-in-out delay-500 duration-500 fixed z-0 top-0 left-0 right-0 bottom-0 w-full h-full min-h-full overflow-hidden bg-center bg-cover bg-scroll lg:bg-fixed" data-bg-img="media/rw-bg.jpg" data-bg-img-2x="media/rw-bg-2x.jpg">
-        <video id="video" class="opacity-0 transition-opacity ease-in-out delay-500 duration-700 absolute top-0 left-0 min-w-full min-h-full object-cover" muted loop preload="none" data-src="media/video.mov" data-src-2x="media/video-2x.mov" data-type="video/mp4" poster="media/rw-bg.jpg" title="Colorful autumn forest seen from a bird POV"></video>
+        <video id="video" class="opacity-0 transition-opacity ease-in-out delay-500 duration-700 absolute top-0 left-0 min-w-full min-h-full object-cover" muted loop playsInline webkit-playsinline preload="none" data-src="media/video.mov" data-src-2x="media/video-2x.mov" data-type="video/mp4" poster="media/rw-bg.jpg" title="Colorful autumn forest seen from a bird POV"></video>
         <div id="overlay" class="absolute top-0 left-0 w-full h-full z-1 bg-black bg-opacity-25"></div>
       </div>
       <!-- / Background video or image -->
 
       <!-- Main Col -->
       <main class="w-full h-auto lg:w-2/5 mx-4 lg:mx-0">
         <!-- Profile Desc -->
-        <div id="profile" class="relative z-10 rounded-lg lg:rounded-l-lg lg:rounded-r-none shadow-xl bg-opacity-75 bg-gray-900 transition duration-300 p-4 md:px-10 md:py-6 text-center lg:text-left">
+        <div id="profile" class="relative z-10 rounded-lg lg:rounded-l-lg lg:rounded-r-none shadow-xl bg-opacity-75 bg-gray-900 transition duration-300 p-6 md:px-10 md:py-6 text-center lg:text-left">
 
           <!-- Image for mobile view -->
-          <div class="block lg:hidden relative z-20 rounded-full shadow-xl mx-auto -mt-24 h-48 w-48 bg-cover bg-center transform transition-transform duration-300 hover:scale-105 focus:scale-105 focus:outline-none" data-bg-img="media/rw-profile.jpg" role="img" aria-label="Robert Wierzchowski smiling outdoor photo"><a class="block w-full h-full" href="https://vi7.revert.pl" title="Revert.pl Web Developer Poznań" aria-label="Robert Wierzchowski"></a></div>
+          <div class="block lg:hidden relative z-20 rounded-full shadow-xl mx-auto -mt-24 h-40 w-40 bg-cover bg-center transform transition-transform duration-300 hover:scale-105 focus:scale-105 focus:outline-none" data-bg-img="media/rw-profile.jpg" role="img" aria-label="Robert Wierzchowski smiling outdoor photo"><a class="block w-full h-full" href="https://vi7.revert.pl" title="Revert.pl Web Developer Poznań" aria-label="Robert Wierzchowski"></a></div>
           <!-- / Image for mobile view -->
 
           <!-- Main title -->