Remove responsive ad sizes and simplify ad implementation

Remove mobileWidth and mobileHeight props from AdSenseAd component, update initialization logic, and simplify ad rendering to non-responsive fixed sizes.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/Myr4JGO

.replit

@@ -23,6 +23,10 @@ externalPort = 3001
 localPort = 35637
 externalPort = 3000
 
+[[ports]]
+localPort = 41551
+externalPort = 3002
+
 [env]
 PORT = "5000"
 

client/src/components/adsense-ad.tsx

@@ -5,8 +5,6 @@ interface AdSenseAdProps {
   adFormat?: 'auto' | 'rectangle' | 'vertical' | 'horizontal';
   width?: number;
   height?: number;
-  mobileWidth?: number;
-  mobileHeight?: number;
   className?: string;
   lazy?: boolean;
 }
@@ -16,32 +14,22 @@ export default function AdSenseAd({
   adFormat = 'auto',
   width,
   height,
-  mobileWidth,
-  mobileHeight,
   className = '',
   lazy = false
 }: AdSenseAdProps) {
   const adRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const initializeAds = () => {
+    const initializeAd = () => {
-      const insElements = adRef.current?.querySelectorAll('ins');
+      const insElement = adRef.current?.querySelector('ins');
-      if (!insElements) return;
+      if (!insElement || insElement.dataset.adsbygoogleStatus === 'done') return;
 
-      insElements.forEach((insElement) => {
+      try {
-        if (insElement.dataset.adsbygoogleStatus === 'done') return;
+        // @ts-ignore
-        
+        (window.adsbygoogle = window.adsbygoogle || []).push({});
-        // Check if this ad is visible (not hidden by responsive classes)
+      } catch (error) {
-        const computedStyle = window.getComputedStyle(insElement);
+        console.error('AdSense initialization error:', error);
-        if (computedStyle.display === 'none') return;
+      }
-
-        try {
-          // @ts-ignore
-          (window.adsbygoogle = window.adsbygoogle || []).push({});
-        } catch (error) {
-          console.error('AdSense initialization error:', error);
-        }
-      });
     };
 
     if (lazy) {
@@ -50,8 +38,7 @@ export default function AdSenseAd({
         (entries) => {
           entries.forEach((entry) => {
             if (entry.isIntersecting) {
-              // Small delay to ensure responsive CSS has been applied
+              initializeAd();
-              setTimeout(initializeAds, 100);
               observer.disconnect();
             }
           });
@@ -65,49 +52,12 @@ export default function AdSenseAd({
 
       return () => observer.disconnect();
     } else {
-      // Immediate initialization with delay for responsive CSS
+      // Immediate initialization
-      setTimeout(initializeAds, 100);
+      initializeAd();
     }
   }, [adSlot, lazy]);
 
-  // Responsive configuration
+  // Simple non-responsive ad configuration
-  const hasResponsiveSizes = (width && height) || (mobileWidth && mobileHeight);
-  
-  if (hasResponsiveSizes) {
-    // Responsive ads with different sizes for desktop/mobile
-    return (
-      <div 
-        className={`adsense-wrapper w-full flex justify-center ${className}`} 
-        ref={adRef}
-        style={{ width: '100%', minWidth: '320px', position: 'relative', zIndex: 1 }}
-      >
-        {/* Desktop ad */}
-        <ins
-          className="adsbygoogle hidden md:inline-block"
-          style={{ 
-            display: 'inline-block',
-            width: width ? `${width}px` : '728px',
-            height: height ? `${height}px` : '90px'
-          }}
-          data-ad-client="ca-pub-4465464714854276"
-          data-ad-slot={adSlot}
-        />
-        {/* Mobile ad */}
-        <ins
-          className="adsbygoogle block md:hidden mx-auto"
-          style={{ 
-            display: 'inline-block',
-            width: mobileWidth ? `${mobileWidth}px` : '300px',
-            height: mobileHeight ? `${mobileHeight}px` : '250px'
-          }}
-          data-ad-client="ca-pub-4465464714854276"
-          data-ad-slot={adSlot}
-        />
-      </div>
-    );
-  }
-
-  // Standard configuration (non-responsive)
   const isFixedSize = width && height;
   const adStyle: React.CSSProperties = {
     display: 'inline-block'
@@ -117,7 +67,8 @@ export default function AdSenseAd({
     adStyle.width = `${width}px`;
     adStyle.height = `${height}px`;
   } else {
-    adStyle.width = '100%';
+    // Default banner size
+    adStyle.width = '728px';
     adStyle.height = '90px';
   }
 
@@ -132,10 +83,7 @@ export default function AdSenseAd({
         style={adStyle}
         data-ad-client="ca-pub-4465464714854276"
         data-ad-slot={adSlot}
-        {...(isFixedSize ? {} : { 
+        data-ad-format="auto"
-          'data-ad-format': adFormat,
-          'data-full-width-responsive': 'true'
-        })}
       />
     </div>
   );

client/src/pages/LivePage.tsx

@@ -461,8 +461,6 @@ export default function LivePage() {
                 adSlot="3047267170"
                 width={728}
                 height={90}
-                mobileWidth={300}
-                mobileHeight={250}
                 className="w-full"
               />
             </div>
@@ -476,8 +474,6 @@ export default function LivePage() {
                 adSlot="5629279662"
                 width={728}
                 height={90}
-                mobileWidth={300}
-                mobileHeight={250}
                 className="w-full"
               />
             </div>
@@ -540,8 +536,6 @@ export default function LivePage() {
                 adSlot="9876543210"
                 width={728}
                 height={90}
-                mobileWidth={300}
-                mobileHeight={250}
               />
             </div>
           </div>

client/src/pages/VideoPage.tsx

@@ -781,8 +781,6 @@ export default function VideoPage() {
                   adSlot="5629279662"
                   width={728}
                   height={90}
-                  mobileWidth={300}
-                  mobileHeight={250}
                   className="w-full"
                 />
               </div>
@@ -797,8 +795,6 @@ export default function VideoPage() {
                 adSlot="5629279662"
                 width={728}
                 height={90}
-                mobileWidth={300}
-                mobileHeight={250}
                 className="w-full"
               />
             </div>
@@ -863,8 +859,6 @@ export default function VideoPage() {
                 adSlot="1372934919"
                 width={728}
                 height={90}
-                mobileWidth={300}
-                mobileHeight={250}
                 className="w-full"
               />
             </div>