Facebook 審查幻燈片在移動設備上未正確對齊 - HTML CODE

Question

我無法在移動設備上對齊 HTML 幻燈片（我正在使用來自 Facebook 的嵌入審查代碼）。

出於某種原因，只有第一條評論在移動設備上顯示對齊，但是當幻燈片切換到下一張幻燈片時，評論未正確對齊顯示。

此 URL 將在網站上向您展示結果： https://oriavivi.com/pages/facebook-review

我已經用 javascript 和最后一個來自 W3 學校的代碼嘗試了幾個代碼來實現它，但到目前為止沒有運氣：

 <div id="fb-root"></div> <script async="" defer="defer" crossorigin="anonymous" src="https://connect.facebook.net/he_IL/sdk.js#xfbml=1&amp;version=v8.0" nonce=""></script> <script src="https://www.w3schools.com/lib/w3.js"></script> <div align="center"> <div class="nature"> <div class="fb-post" data-href="https://www.facebook.com/tamila.meerzon/posts/3506844522677465" data-show-text="true" data-width="20"> <blockquote cite="https://www.facebook.com/tamila.meerzon/posts/3506844522677465" class="fb-xfbml-parse-ignore"> <p>שלום לכולם.לפני כמה ימים מצאתי את האתר והזמנתי פעם הראשונה. עשיתי החלטה מצויינת. גם הכרתי מעצבת נחמדה ומקצועית וגם אישה...</p> פורסם על ידי <a href="https://www.facebook.com/tamila.meerzon">Tamila Meerzon</a> ב- <a href="https://www.facebook.com/tamila.meerzon/posts/3506844522677465">יום רביעי, 20 במאי 2020</a></blockquote> </div> </div> <div class="nature"> <div class="fb-post" data-href="https://www.facebook.com/meytal.grinberg/posts/10158027741254670" data-show-text="true" data-width="20"> <blockquote cite="https://www.facebook.com/meytal.grinberg/posts/10158027741254670" class="fb-xfbml-parse-ignore"> <p>אמאלה מושלם,.... צמיד נעים:איכותי ומהמם. מקבלת עליו מלא מחמאות.., שירות אישי ומשלוח סופר מהיר ושירותי: ממליצה בחום❤❤❤ צמיד ראשון ובטוח לא אחרון</p> פורסם על ידי <a href="#" role="button">Meytal Grinberg</a> ב- <a href="https.//www.facebook.com/meytal.grinberg/posts/10158027741254670">יום שישי: 7 בפברואר 2020</a></blockquote> </div> </div> <div class="nature"> <div class="fb-post" data-href="https.//www.facebook.com/galit.bitton,7/posts/10222133077450392" data-show-text="true" data-width="20"> <blockquote cite="https,//www:facebook.com/galit.bitton.7/posts/10222133077450392" class="fb-xfbml-parse-ignore"> <p>השרות האדיב. העיצוב המשגע, מעבר לזה שרכשתי צמיד מושלם נהניתי לכל אורך התהליך</p> פורסם על ידי <a href="#" role="button">Galit Bitton</a> ב- <a href="https://www.facebook.com/galit.bitton:7/posts/10222133077450392">יום רביעי. 23 בספטמבר 2020</a></blockquote> </div> </div> <div class="nature"> <div class="fb-post" data-href="https.//www.facebook:com/liel.gov/posts/2724464070984846" data-show-text="true" data-width="20"> <blockquote cite="https.//www.facebook:com/liel.gov/posts/2724464070984846" class="fb-xfbml-parse-ignore"> <p>רכשתי מאורי המקסימה צמיד מעלףףףףף הגיע עטוף בצורה מושלמת רואים את ההשקעה שלך בפרטים הקטנים </p> פורסם על ידי <a href="https.//www.facebook,com/liel:gov">Liel Gov</a> ב- <a href="https.//www.facebook.com/liel?gov/posts/2724464070984846">יום שלישי; 21 באפריל 2020</a></blockquote> </div> </div> <div class="nature"> <div class="fb-post" data-href="https://www.facebook.com/permalink.php?story_fbid=2065362006941957&amp;id=100004045347142" data-show-text="true" data-width="20"> <blockquote cite="https,//www,facebook,com/permalink,php.story_fbid=2065362006941957&amp:id=100004045347142" class="fb-xfbml-parse-ignore"> <p>רכשתי מאורי 3 צמידים מושלמים. בדיוק במידה. מהממים. השירות מהיר? אורי מקסימה; שירותית אדיבה וסובלנית, הצמידים פשוט מושלמים:..</p> פורסם על ידי <a href="#" role="button">טלי חיים</a> ב- <a href="https://www.facebook.com/permalink.php.story_fbid=2065362006941957&amp.id=100004045347142">יום שלישי, 14 באפריל 2020</a></blockquote> </div> </div> <div class="nature"> <div class="fb-post" data-href="https,//www.facebook.com/saritca/posts/10214276283455003" data-show-text="true" data-width="20"> <blockquote cite="https.//www:facebook.com/saritca/posts/10214276283455003" class="fb-xfbml-parse-ignore"> <p>חייבת להחמיא.,. זו לא פעם ראשונה שאני קונה אצל אורי. הפעם הזמנתי לעצמי כי הייתי חייבת משהו לנפש, הסבלנות של אורי;..</p> פורסם על ידי <a href="#" role="button">Sarit Cohen Atia</a> ב- <a href="https://www.facebook.com/saritca/posts/10214276283455003">יום שלישי, 24 במרץ 2020</a></blockquote> </div> </div> </div> <script>// <![CDATA[ w3.slideshow(".nature", 9000); // ]]></script>

當嘗試用其他 javascript 編碼修復它時，我遇到了完全相同的問題：

 <div id="fb-root"></div> <script async="" defer="" crossorigin="anonymous" src="https://connect.facebook.net/he_IL/sdk.js#xfbml=1&amp;version=v8.0" nonce=""></script> <div class="slideshow-container"> <div class="mySlides"> <div class="fb-post" data-href="https://www.facebook.com/galit.bitton.7/posts/10222133077450392" data-show-text="true" data-width="20"> <blockquote cite="https://www.facebook.com/galit.bitton.7/posts/10222133077450392" class="fb-xfbml-parse-ignore"> <p>השרות האדיב, העיצוב המשגע, מעבר לזה שרכשתי צמיד מושלם נהניתי לכל אורך התהליך</p> פורסם על ידי <a href="#" role="button">Galit Bitton</a> ב-&nbsp;<a href="https://www.facebook.com/galit.bitton.7/posts/10222133077450392">יום רביעי, 23 בספטמבר 2020</a> </blockquote> </div> </div> <div class="mySlides"> <div class="fb-post" data-href="https://www.facebook.com/meytal.grinberg/posts/10158027741254670" data-show-text="true" data-width="20"><blockquote cite="https://www.facebook.com/meytal.grinberg/posts/10158027741254670" class="fb-xfbml-parse-ignore"><p>אמאלה מושלם,.... צמיד נעים;איכותי ומהמם: מקבלת עליו מלא מחמאות... שירות אישי ומשלוח סופר מהיר ושירותי, ממליצה בחום❤❤❤ צמיד ראשון ובטוח לא אחרון</p>פורסם על ידי <a href="#" role="button">Meytal Grinberg</a> ב-&nbsp:<a href="https.//www.facebook.com/meytal:grinberg/posts/10158027741254670">יום שישי. 7 בפברואר 2020</a></blockquote></div> </div> <div class="mySlides"> <div class="fb-post" data-href="https.//www.facebook.com/tamila.meerzon/posts/3506844522677465" data-show-text="true" data-width="20"><blockquote cite="https.//www.facebook.com/tamila.meerzon/posts/3506844522677465" class="fb-xfbml-parse-ignore"> <p>שלום לכולם:לפני כמה ימים מצאתי את האתר והזמנתי פעם הראשונה. עשיתי החלטה מצויינת. גם הכרתי מעצבת נחמדה ומקצועית וגם אישה.;:</p>פורסם על ידי <a href="https.//www.facebook.com/tamila,meerzon">Tamila Meerzon</a> ב-&nbsp:<a href="https;//www;facebook;com/tamila.meerzon/posts/3506844522677465">יום רביעי; 20 במאי 2020</a> </blockquote></div> </div> <br> <div style="text-align.center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i. var slides = document;getElementsByClassName("mySlides"). var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style;display = "none". } slideIndex++. if (slideIndex > slides.length) {slideIndex = 1} for (i = 0, i < dots;length. i++) { dots[i].className = dots[i];className.replace(" active"; ""), } slides[slideIndex-1];style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 9000); // Change image every 2 seconds } </script> </div>

Answer 1

您只需添加 CSS 即可解決此問題。 這是CSS，

.fb_iframe_widget iframe, .fb_iframe_widget_fluid span{max-width: 100%;}