Make Facebook page plugin responsive (Searched everywhere and couldn't find a solution)

Question

It appears that Facebook has decided to change the like box to page plugin, and limit the maximum size to 500px.

Page with the script: http://akecheta.com/facebooklikeplugin-responsive.html

My problem is exactly that one, I can't use a full width layout on the likebox. Here is what I've tried so far:

 /* Fits the like box to the parent div, creating a fluid layout */
#u_0_0 > div {
  width: 100% !important;
}
/* Fits the background image to the like box */
.uiScaledImageContainer._2zfr {
  width: 100% !important;
}

/* Modifies the first background color of the fans part */
._h7l {
  background: #EE6C00 !important;
}
/* Modifies the second background color of the fans part */
._h7n {
  background: transparent !important;
}
/* Modifies the color of the text above the fans thumbnails */
/* Modifies the color of the text above the fans thumbnails */
._50f3 {
  font-size: 150%;
  line-height: 25px;
  color: #FFFFFF !important;
}

It worked amazingly well on the fly, but then I saved those changes to my stylesheet, nothing happened.

All the classes are changed when the page loads, but the id #u_0_0 is still kept the same. It's as if it didn't exist.

Right now I'm trying to think of a solution for this problem, as I need to use the page plugin with a full width layout.

Answer 1

The reason your CSS worked when you did it on the fly in devtools and not when you put it in your stylesheet is that the iframe the plugin is being loaded in cannot be styled by CSS outside of it. The only way to style an iframe is from within the iframe itself. Since you are loading this as a third party plugin, you will need to look for a way to dynamically inject the styles into the iframe once it has fully loaded.

See this question for a bit more direction in what you are trying to do: Append a stylesheet to an iframe with jQuery