Jump to content

Prestashop 1.7.6.1 Facebook box not showing on mobile devices

melkij22

By melkij22
in General topics

 Share

Recommended Posts

NordicDesigner Apprentice

NordicDesigner

Posted
Posted

Сheck if the Facebook Like Box iframe has a width and height set. Make sure they are set to responsive values like 100% for width. If not, try adding this to your custom.css: 

.fb_iframe_widget iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

This should help the iframe adapt to smaller screens.

Link to comment
Share on other sites
melkij22 Apprentice

melkij22

Posted
  • Author
Posted
2 hours ago, NordicDesigner said:

Сheck if the Facebook Like Box iframe has a width and height set. Make sure they are set to responsive values like 100% for width. If not, try adding this to your custom.css: 

.fb_iframe_widget iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

This should help the iframe adapt to smaller screens.

add your suggested code to custom.css, still no luck

Link to comment
Share on other sites
  • 2 weeks later...
NordicDesigner Apprentice

NordicDesigner

Posted
Posted
On 12/6/2024 at 4:10 PM, melkij22 said:

add your suggested code to custom.css, still no luck

Hi! Check if the Facebook iframe is wrapped in a container. If yes, ensure the container is responsive. Add this to your custom.css: 

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

Also, make sure the parent container isn’t restricted by overflow:hidden or fixed dimensions.

Link to comment
Share on other sites
  • 1 month later...
WebDesk Solution Enthusiast

WebDesk Solution

Posted
Posted

Hello,

We have analyzed your issue and provided the following solution,

Step 1: Include the JavaScript SDK on your page. Ideally, add it right after the opening <body> tag. You can do this by modifying layout-both-columns.tpl the file located at

themes/classic/templates/layouts/layout-both-columns.tpl

Add the following code:

Screenshot for your Reference: https://prnt.sc/p2UaKOIMJEdR

 

Step 2: Insert the plugin code at the desired location on your page. To display the plugin in the footer, edit the footer.tpl file located at

themes/classic/templates/_partials/footer.tpl
Add the following code: 

<div class="fb-page" data-href="https://www.facebook.com/avrahome.lt" data-tabs="" data-width="360" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
    <blockquote cite="https://www.facebook.com/avrahome.lt" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/avrahome.lt">AVRAhome.lt</a></blockquote>
</div>

Step 3: Clear the PrestaShop cache from the Back Office to ensure the changes take effect.

Visit the frontend to verify that the Facebook-like box in mobile devices.

We hope this solution works for you!!
 

If you find our reply helpful, please hit Like it.

A North American PrestaShop Development Agency that delivers powerful results, innovation, and secure digital transformation.

If you find our reply helpful, please hit Like it.
 

Thank You,
WebDesk Solution Support Team
Get a Free Quote | Email | PrestaShop Partner | PrestaShop Development Agency | Call Us 877.536.3789
Location: 150 King St. W. Toronto, ON M5H 1J9

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...