fix(images): remove invalid inline img styling breaking responsive object-fit grids and swipers over thumbnails

Author: TechStack Global

affiliate-disclosure.html

@@ -44,7 +44,7 @@
 </ul>
 </nav>
 </header>
-<main class="container section-padding" style="margin-top: 80px; max-max-width: 100%; height: auto;">
+<main class="container section-padding" style="margin-top: 80px; max-width: 800px;">
 <div class="glass-panel" style="padding: 4rem;">
 <h1 style="font-size: 2.5rem; margin-bottom: 2rem;">Affiliate <span class="accent">Disclosure</span></h1>
 <p style="font-size: 1.1rem; color: var( text-secondary); margin-bottom: 1.5rem;">At TechStack Global, we

amazon-stack.html

@@ -95,15 +95,15 @@ <h1>The Amazon Stack</h1>
                 style="margin-bottom: 0.5rem; border-bottom: 1px solid var( accent); display: inline-block; padding-bottom: 5px;">
                 Product Library
             </h2>
-            <p style="color: var( text-muted); margin-bottom: 2rem; max-max-width: 100%; height: auto;">
+            <p style="color: var( text-muted); margin-bottom: 2rem; max-width: 100%;">
                 Hardware chosen for performance, reliability, and practical daily use.
             </p>
             <div class="blog-grid" style="grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));">
 
                 <!-- Bose QuietComfort Ultra -->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="Bose QuietComfort Ultra wireless headphones thumbnail" class="product-thumbnail"
+                        <img  alt="Bose QuietComfort Ultra wireless headphones thumbnail" class="product-thumbnail"
                             loading="lazy" src="posts/images/bose-qc-ultra-front.jpg" />
                     </div>
                     <div class="product-info">
@@ -117,7 +117,7 @@ <h3><a aria-label="Open review: Bose QuietComfort Ultra"
                 <!-- Sony WH-1000XM5 -->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="Sony WH-1000XM5 wireless noise cancelling headphones thumbnail"
+                        <img  alt="Sony WH-1000XM5 wireless noise cancelling headphones thumbnail"
                             class="product-thumbnail" loading="lazy" src="posts/images/sony-wh-1000xm5-front.jpg" />
                     </div>
                     <div class="product-info">
@@ -132,7 +132,7 @@ <h3><a aria-label="Open review: Sony WH-1000XM5" href="posts/sony-wh-1000xm5-rev
                 <!-- Samsung Odyssey G8 -->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="Samsung Odyssey G8 OLED monitor front view thumbnail" class="product-thumbnail"
+                        <img  alt="Samsung Odyssey G8 OLED monitor front view thumbnail" class="product-thumbnail"
                             loading="lazy" src="posts/images/odyssey-g8-front.jpg" />
                     </div>
                     <div class="product-info">
@@ -146,7 +146,7 @@ <h3><a aria-label="Open review: Samsung Odyssey G8 OLED"
                 <!-- Alienware AW3423DWF -->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="Dell Alienware AW3423DWF QD-OLED monitor front view thumbnail"
+                        <img  alt="Dell Alienware AW3423DWF QD-OLED monitor front view thumbnail"
                             class="product-thumbnail" loading="lazy" src="posts/images/alienware-aw3423dwf-front.jpg" />
                     </div>
                     <div class="product-info">
@@ -160,7 +160,7 @@ <h3><a aria-label="Open review: Dell Alienware AW3423DWF"
                 <!-- Shure SM7dB-->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="Shure SM7dB dynamic vocal microphone product thumbnail" class="product-thumbnail"
+                        <img  alt="Shure SM7dB dynamic vocal microphone product thumbnail" class="product-thumbnail"
                             loading="lazy" src="posts/images/shure-sm7db-primary.jpg" />
                     </div>
                     <div class="product-info">
@@ -176,7 +176,7 @@ <h3><a aria-label="Open review: Shure SM7dB Dynamic Microphone"
                 <!-- Shure SM7B-->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="Shure SM7B dynamic studio microphone profile view thumbnail" class="product-thumbnail"
+                        <img  alt="Shure SM7B dynamic studio microphone profile view thumbnail" class="product-thumbnail"
                             loading="lazy" src="posts/images/shure-sm7b-primary.jpg" />
                     </div>
                     <div class="product-info">
@@ -191,7 +191,7 @@ <h3><a aria-label="Open review: Shure SM7B" href="posts/shure-sm7b-review.html">
                 <!-- MacBook Pro-->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="Apple MacBook Pro M4 Pro product thumbnail" class="product-thumbnail" loading="lazy"
+                        <img  alt="Apple MacBook Pro M4 Pro product thumbnail" class="product-thumbnail" loading="lazy"
                             src="assets/images/macbook_hero.jpg" />
                     </div>
                     <div class="product-info">
@@ -205,7 +205,7 @@ <h3><a aria-label="Open review: Apple MacBook Pro M4 Pro"
                 <!-- Dell XPS 15-->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="Dell XPS 15 9530 product thumbnail" class="product-thumbnail" loading="lazy"
+                        <img  alt="Dell XPS 15 9530 product thumbnail" class="product-thumbnail" loading="lazy"
                             src="assets/images/products/61Ks9X44eVL._AC_SL1181_.jpg" />
                     </div>
                     <div class="product-info">
@@ -219,7 +219,7 @@ <h3><a aria-label="Open review: Dell XPS 15 9530" href="posts/dell-xps-15-9530-r
                 <!-- Surface Laptop Studio 2-->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="Surface Laptop Studio 2 product thumbnail" class="product-thumbnail" loading="lazy"
+                        <img  alt="Surface Laptop Studio 2 product thumbnail" class="product-thumbnail" loading="lazy"
                             src="assets/images/products/61LMopCIyTL._AC_SL1200_.jpg" />
                     </div>
                     <div class="product-info">
@@ -234,7 +234,7 @@ <h3><a aria-label="Open review: Surface Laptop Studio 2"
                 <!-- Samsung SSD-->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="Samsung 990 PRO SSD 2TB product thumbnail" class="product-thumbnail" loading="lazy"
+                        <img  alt="Samsung 990 PRO SSD 2TB product thumbnail" class="product-thumbnail" loading="lazy"
                             src="assets/images/samsung-990-pro-primary-v3.jpg?v=final_v3" />
                     </div>
                     <div class="product-info">
@@ -249,7 +249,7 @@ <h3><a aria-label="Open review: Samsung 990 PRO SSD 2TB"
                 <!-- LG Monitor-->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="LG 27US500-W 4K Monitor product thumbnail" class="product-thumbnail" loading="lazy"
+                        <img  alt="LG 27US500-W 4K Monitor product thumbnail" class="product-thumbnail" loading="lazy"
                             src="assets/images/products/lg-27us500w-primary.jpg" />
                     </div>
                     <div class="product-info">
@@ -264,7 +264,7 @@ <h3><a aria-label="Open review: LG 27US500-W 4K Monitor"
                 <!-- Dell Dock-->
                 <div class="product-item glass-card">
                     <div class="product-thumbnail-wrapper">
-                        <img style="max-width: 100%; height: auto;" alt="Dell SD25TB4 Pro Dock product thumbnail" class="product-thumbnail" loading="lazy"
+                        <img  alt="Dell SD25TB4 Pro Dock product thumbnail" class="product-thumbnail" loading="lazy"
                             src="assets/images/products/dell-sd25tb4-box.jpg" />
                     </div>
                     <div class="product-info">

clean_img_styles.js

@@ -0,0 +1,34 @@
+const fs = require('fs');
+
+function fixImages(filePath) {
+    if (!fs.existsSync(filePath)) return;
+    let content = fs.readFileSync(filePath, 'utf8');
+    let originalContent = content;
+
+    // Remove the intrusive inline style from our previous bulk script
+    // that ruins object-fit by forcing height: auto.
+
+    // Specific match for product-thumbnails and swiper slides that had this injected:
+    // Actually, let's just safely strip `style="max-width: 100%; height: auto;"` 
+    // and `style="max-width: 100%; height: auto; "` if it's there.
+    // Also remove generic inline style if it ONLY contains that.
+
+    content = content.replace(/style=["']max-width:\s*100%;\s*height:\s*auto;?\s*["']/gi, '');
+
+    // For images that had object-fit contain inside the inline style like we saw in some debug output:
+    content = content.replace(/style=["']max-width:\s*100%;\s*height:\s*auto;\s*object-fit:\s*contain;?["']/gi, 'style="object-fit: contain;"');
+
+    // Clean up empty styles
+    content = content.replace(/style=["']\s*["']/gi, '');
+
+    if (content !== originalContent) {
+        fs.writeFileSync(filePath, content);
+        console.log(`Fixed images in ${filePath}`);
+    } else {
+        console.log(`No changes needed for ${filePath}`);
+    }
+}
+
+// Fix the two pages the user explicitly mentioned
+fixImages('amazon-stack.html');
+fixImages('index.html');

contact.html

@@ -58,7 +58,7 @@
             extra
             cost to you.
         </div>
-<main class="container section-padding" style="margin-top: 80px; max-max-width: 100%; height: auto;">
+<main class="container section-padding" style="margin-top: 80px; max-width: 800px;">
 <div class="glass-panel" style="padding: 4rem;">
 <h1 style="font-size: 2.5rem; margin-bottom: 2rem;">Get in <span class="accent">Touch</span></h1>
 <form action="https://formsubmit.co/techstackglobal9@gmail.com" method="POST" style="display: flex; flex-direction: column; gap: 1.5rem;">

fix_max_width.js

@@ -0,0 +1,41 @@
+const fs = require('fs');
+const path = require('path');
+
+function getHtmlFiles(dir, files_) {
+    files_ = files_ || [];
+    let files = fs.readdirSync(dir);
+    for (let file of files) {
+        let name = path.join(dir, file);
+        if (fs.statSync(name).isDirectory()) {
+            if (!['.git', 'node_modules', 'images', 'assets'].includes(file)) {
+                getHtmlFiles(name, files_);
+            }
+        } else if (name.endsWith('.html') && !name.startsWith('old_')) {
+            files_.push(name);
+        }
+    }
+    return files_;
+}
+
+const allHtmlFiles = getHtmlFiles('.');
+
+allHtmlFiles.forEach(file => {
+    let content = fs.readFileSync(file, 'utf8');
+    let originalContent = content;
+
+    // Replace the botched max-max-width typo
+    // Previously it might have been max-width: 600px;
+    // Let's just fix it to max-width: 600px; or let's inspect what it should be.
+    // Actually, wait, replacing max-width: 600px with max-width: 100%; is safer 
+    // than height: auto which breaks the swiper completely!
+    // Let's just change "max-max-width: 100%; height: auto;" to "max-width: 600px;" 
+    // No, wait, if it was in index.html for .hero-swiper-shell: it was `width: 100%; max-width: 800px;`.
+    // Wait, the regex was `width:\s*[4-9][0-9]{2,}px;?` which matched `width: 800px` maybe?
+
+    content = content.replace(/max-max-width:\s*100%;\s*height:\s*auto;/gi, "max-width: 800px;");
+
+    if (content !== originalContent) {
+        fs.writeFileSync(file, content);
+        console.log(`[Fixed max-max-width] ${file}`);
+    }
+});

index.html

@@ -102,7 +102,7 @@
       <div class="hero-content">
         <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
         </h1>
-        <p class="hero-sub" style="font-size: 1.25rem; max-max-width: 100%; height: auto; margin-top: 1rem;">No hype. No
+        <p class="hero-sub" style="font-size: 1.25rem; max-width: 100%; margin-top: 1rem;">No hype. No
           fluff.
           Just clear guidance on the tech that powers modern work.</p>
 
@@ -114,7 +114,7 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
         <style>
           .hero-swiper-shell {
             position: relative;
-            max-max-width: 100%; height: auto;
+            max-width: 100%;
             margin: 0 auto;
             display: flex;
             align-items: center;
@@ -261,7 +261,7 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
           }
 
           /* Mobile Responsiveness */
-          @media (max-max-width: 100%; height: auto;) {
+          @media (max-width: 600px) {
             .swiper-card-effect {
               height: 440px;
               max-width: 280px;
@@ -306,7 +306,7 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
                   style="font-size: 0.75rem; color: var(--accent); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
                   <i class="fa-solid fa-headphones"></i> Audio
                 </div>
-                <img style="max-width: 100%; height: auto;" src="posts/images/sony-wh-1000xm5-front.jpg" alt="Sony WH-1000XM5" loading="lazy">
+                <img src="posts/images/sony-wh-1000xm5-front.jpg" alt="Sony WH-1000XM5" loading="lazy">
                 <h3>Sony WH-1000XM5</h3>
                 <p>Top-tier active noise cancellation and supreme all-day comfort for deep focus sessions.</p>
                 <a class="hero-read-btn" href="posts/sony-wh-1000xm5-review.html">
@@ -320,7 +320,7 @@ <h3>Sony WH-1000XM5</h3>
                   style="font-size: 0.75rem; color: var(--accent); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
                   <i class="fa-solid fa-microphone"></i> Broadcasting
                 </div>
-                <img style="max-width: 100%; height: auto;" src="posts/images/shure-sm7db-primary.jpg" alt="Shure SM7dB Microphone" loading="lazy">
+                <img src="posts/images/shure-sm7db-primary.jpg" alt="Shure SM7dB Microphone" loading="lazy">
                 <h3>Shure SM7dB</h3>
                 <p>The industry standard podcast microphone, now powered with a built-in clean preamp.</p>
                 <a class="hero-read-btn" href="posts/shure-sm7db-review.html">
@@ -334,7 +334,7 @@ <h3>Shure SM7dB</h3>
                   style="font-size: 0.75rem; color: var(--accent); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
                   <i class="fa-solid fa-desktop"></i> Displays
                 </div>
-                <img style="max-width: 100%; height: auto;" src="posts/images/alienware-aw3423dwf-front.jpg" alt="Alienware AW3423DWF" loading="lazy">
+                <img src="posts/images/alienware-aw3423dwf-front.jpg" alt="Alienware AW3423DWF" loading="lazy">
                 <h3>Alienware AW3423DWF</h3>
                 <p>Stunning QD-OLED ultrawide performance delivering flawless visual immersion.</p>
                 <a class="hero-read-btn" href="posts/alienware-aw3423dwf-review.html">
@@ -388,7 +388,7 @@ <h2>Explore the Stack</h2>
         <p>Browse hardware and smart digital tools by category</p>
       </div>
       <div class="category-grid"
-        style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-max-width: 100%; height: auto; margin: 0 auto;">
+        style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 100%; margin: 0 auto;">
         <a class="cat-card featured-cat" href="amazon-stack.html">
           <i class="fa-brands fa-amazon"></i>
           <h3>Amazon Stack</h3>
@@ -411,7 +411,7 @@ <h3>Smart Tools</h3>
     <!-- Lead Capture / Newsletter CTA -->
     <section class="newsletter-section section-padding">
       <div class="container cta-box glass-panel"
-        style="border: 1px solid var(--border-glass); padding: 2.5rem; border-radius: var(--border-radius); text-align: center; max-max-width: 100%; height: auto; margin: 0 auto;">
+        style="border: 1px solid var(--border-glass); padding: 2.5rem; border-radius: var(--border-radius); text-align: center; max-width: 100%; margin: 0 auto;">
         <h2 style="font-size: 2.2rem; margin-bottom: 0.5rem;">Get Practical Tech Picks</h2>
         <p style="font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 2rem;">Weekly
           reviews, guides, and curated deals for smart tech buyers.</p>

old_amazon_stack.html

@@ -307,7 +307,7 @@ <h3><i class="fa-solid fa-laptop" style="color: #00c8ff;"></i> Buy Odyssey If:</
                 style="padding: 2.5rem; border-top: 4px solid var(--accent); margin-top: 3rem; text-align: center;">
                 <h2>Final Recommendation: Which is Better?</h2>
                 <p
-                    style="font-size: 1.15rem; line-height: 1.8; margin-bottom: 2rem; max-max-width: 100%; height: auto; margin-left: auto; margin-right: auto;">
+                    style="font-size: 1.15rem; line-height: 1.8; margin-bottom: 2rem; max-width: 800px; margin-left: auto; margin-right: auto;">
                     For most clean desk setups and hybrid users, the <strong>Samsung Odyssey G8</strong> offers greater
                     versatility thanks to its USB-C 65W charging and Smart TV capabilities. It is a stunning piece of
                     design that functions as both a high-end monitor and a standalone media hub. However, for pure

posts/alienware-aw3423dwf-vs-odyssey-g8.html

@@ -29,7 +29,7 @@
   <style>
     body {
       padding: 2rem;
-      max-max-width: 100%; height: auto;
+      max-width: 800px;
       margin: 0 auto;
       line-height: 1.6;
     }

privacy-policy.html

@@ -81,7 +81,7 @@ <h1>Smart Tools</h1>
             <i class="fa-solid fa-clock-rotate-left"
                 style="font-size: 3rem; color: var(--accent); margin-bottom: 1.5rem;"></i>
             <h2>Content Coming Soon</h2>
-            <p style="color: var(--text-secondary); max-max-width: 100%; height: auto; margin: 0 auto;">We are currently evaluating the
+            <p style="color: var(--text-secondary); max-width: 800px; margin: 0 auto;">We are currently evaluating the
                 best AI tools, software suites, and digital productivity solutions for 2026. Stay tuned for our upcoming
                 guides.</p>
             <a href="index.html" class="btn-secondary" style="margin-top: 2rem; display: inline-block;">Return Home</a>