SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Suggestions for a responsive Facebook Page module?

5 years 6 months ago #123807 by hboinnard
Hello,

After testing several extensions from the JED, I am still looking at a simple way to embed a Facebook page box on a Joomla home page, like in the screenshot. It is working at the moment with JO Facebook like box, following Valentin's suggestion here .

But this is not responsive, that means that the width is fixed, so for tablet or mobile, the module is not fitting the sidebar width.

I used on other websites JFBConnect, which is great. But as I only need the FB box, it is kind of heavy, and need the API from Facebook, kind of hassle for the customer, and time consuming.

Would you have a recommendation?

Kind regards,
Hervé

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 6 months ago - 5 years 6 months ago #123811 by Valentin
Hi Hervé,

It's hard to find an extension that could include responsive support, since mainly the responsive support comes from the template's CSS.

You can try adding responsive support with some CSS.
May I have the link of your site to take a look? Keep the facebook box enabled.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 6 months ago #123816 by hboinnard
Hi Valentin,

Thank you Valentin for your quick reply. Here is the website:
www.westernautos.ie/

I'm using a Rocket Theme and Gantry 4 template. Also attached the module settings.

Kind regards,
Hervé

This message has attachments images.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 6 months ago #123840 by Valentin
Hi Hervé,
Thanks for sharing the module settings!

Before to consider adding custom CSS, please edit the module. Set a width value of 100%.
See if the box is responsive.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: hboinnard

Please Log in to join the conversation.

5 years 5 months ago #125727 by hboinnard
Hi Valentin,

Thanks, but it doesn't seem to work with 100% width. No is displayed with this value. I supposed that a absolute value is expected.

The minimum supported module width is 292px.


Still searching!

Kind regards,
Hervé

Please Log in to join the conversation.

5 years 5 months ago #125731 by Valentin
Hi Hervé,
It seems the width is static, which make it difficult to add responsive support.

Something that may works or not, but still worth trying, is this custom CSS :
.fb-like-box {
    overflow:hidden;
    padding-bottom:100%;
    position:relative;
    height:0;
}
.fb-like-box iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!