Poste Facebook Like Box on wp site - Resizing pc/mobile

Hello,

I have generated a Facebook Like Box on this page:
https://developers.facebook.com/docs/reference/plugins/like-box/

The Code the "Generator" put out is that one: (i choose the HTML 5 Code)

Code:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=538934679516193";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
 
<div class="fb-like-box" data-href="https://www.facebook.com/zartherb" data-width="250" data-height="800" data-colorscheme="dark" data-show-faces="false" data-header="false" data-stream="true" data-show-border="false" scrolling="no"></div>

I post that code on my wordpress site "News".
The code works on pc an smartphone.


BUT:
If I want, that the Like Box goes about Full Width (on Smartphone) I have an maximum data-width="250".

> This looks on the PC (and Tablet) not so nice...
Please see attached file.

How can I provide 2 versions of the Like Box?
The smaller one using width 250 for smartphones....
And the bigger one using width 600 for showing on pc?

Do you know what I mean?
I have tried it by my one, but it won´t work.

Maybe in style css of the Theme?

Hope you can help me!

 

see Picture

 

Thats the URL
http://zartherb-aichach.de/news/

 

Hello,

Paste the following code in your Custom CSS
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

#facebook {
width: 600px;
}
.fb_iframe_widget iframe {
width: 600px! important;
}
@media only screen and (max-width: 767px) and (min-width: 480px){
.fb_iframe_widget iframe {
width: 430px! important;
}
}
@media only screen and (max-width: 480px){
.fb_iframe_widget iframe {
width: 250px! important;
}
}

You can adjust the value of "width" as per your requirement.
This will solve your issue.

 

Great Piyush!

It works perfect