Fix: Mobile image css (#40)

Author: danciaclara

docs/devices/mobile.mdx

@@ -30,11 +30,11 @@ Your dashboard includes a search box and familiar sections like **Your Work** an
 - **Projects** <br/>
 This screen shows all the projects you have access to, along with your role and the active issues count. Tap the star icon to add a project to your **Favorites** for quick access.
 
-    <div class="container">
-        <div class="box">
+    <div class="mobile-img-container">
+        <div class="mobile-img-box">
             <img src="https://media.docs.plane.so/mobile/app-home.webp" alt="Home" width="300"/>
         </div>
-        <div class="box">
+        <div class="mobile-img-box">
             <img src="https://media.docs.plane.so/mobile/app-projects.webp" alt="Projects" width="300"/>
         </div>
     </div>
@@ -46,11 +46,11 @@ Need to create a new issue? Tap the + Create button. A simple modal will pop up,
     - Tap the **+** icon at the bottom left to assign members, priority, state, and other properties.
     - Hit the **Create** button to add it to your project.
 
-    <div class="container">
-        <div class="box">
+    <div class="mobile-img-container">
+        <div class="mobile-img-box">
             <img src="https://media.docs.plane.so/mobile/app-create-issue.webp" alt="Create issue" width="300"/>
         </div>
-        <div class="box">
+        <div class="mobile-img-box">
             <img src="https://media.docs.plane.so/mobile/app-issue-properties.webp" alt="Issue properties" width="300"/>
         </div>
     </div>
@@ -61,11 +61,11 @@ Stay updated with notifications about issues you’ve created, are assigned to,
 - **Profile** <br/>
 View your profile and manage your account here. You can also switch between workspaces or log out of the app from this screen.
 
-    <div class="container">
-        <div class="box">
+    <div class="mobile-img-container">
+        <div class="mobile-img-box">
             <img src="https://media.docs.plane.so/mobile/app-inbox.webp" alt="Inbox" width="300"/>
         </div>
-        <div class="box">
+        <div class="mobile-img-box">
             <img src="https://media.docs.plane.so/mobile/app-profile.webp" alt="Profile" width="300"/>
         </div>
     </div>
@@ -95,11 +95,11 @@ View a list of all, active and backlog issues.
 
     - Click the **+ Add** button on the bottom left to add sub-issues and relations. You can also swipe left or right to view sub-issues, relations, links, and attachments.
 
-    <div class="container">
-        <div class="box">
+    <div class="mobile-img-container">
+        <div class="mobile-img-box">
             <img src="https://media.docs.plane.so/mobile/app-issues.webp" alt="Issues" width="300"/>
         </div>
-        <div class="box">
+        <div class="mobile-img-box">
             <img src="https://media.docs.plane.so/mobile/app-issue-details.webp" alt="Issue details" width="300"/>
         </div>
     </div>
@@ -119,11 +119,11 @@ View a list of all, active and backlog issues.
 - **Pages** <br/>
     View all project pages, whether public, private, or archived. You can mark important pages as favorites or search for specific content.
 
-    <div class="container">
-        <div class="box">
+    <div class="mobile-img-container">
+        <div class="mobile-img-box">
             <img src="https://media.docs.plane.so/mobile/app-cycles.webp" alt="Cycles" width="300"/>
         </div>
-        <div class="box">
+        <div class="mobile-img-box">
             <img src="https://media.docs.plane.so/mobile/app-modules.webp" alt="Modules" width="300"/>
         </div>
     </div>

src/css/custom.css

@@ -409,15 +409,15 @@ table thead tr {
   border-bottom: none;
 }
 
-.container{
+.mobile-img-container{
   display:flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
 
 }
-.box{
+.mobile-img-box{
   display:flex;
   flex-direction: column;
   align-items: center;