I am using the widgets module with social media. I am trying to set the width of the fb like box and the twitter feed widget to 100%, but have not had success. Is this possible? I have tried to use the important flag in my css. If this is possible please advise. Thank you. I have seen a couple posts about this but no real solution.

Comments

21tech’s picture

Status:Active» Fixed

Got it figured out.

Here is the css I finally got to work:

.fb-like-box, .fb_iframe_widget, .fb-like-box span, .fb-like-box span iframe, .fb_iframe_widget span, .fb_iframe_widget span iframe
{
width:100% !important;
max-width:100% !important;
}
.twtr-doc
{
width:100% !important;
max-width:100% !important;
}

I probably could have used less for the fb, but I don't have time to narrow down exactly which classes are required.

21tech’s picture

Status:Fixed» Closed (fixed)
knalstaaf’s picture

Using !important-flags is not really advised in a default stylesheet of a module imo. I'm having trouble working around it as well.

Edit: I was referring to the Twitter Profile Widget, but it's adjustable in the configuration page of it (admin/config/media/socialmedia): Default widget appearance. There you can adjust a (fixed) width as well (you have to apparently), but as mentionned above, you still make this responsive with the !important-flags .

This is confusing at first, yet very accessible for unexperienced users. Which is ok.

a.ross’s picture

Category:support» feature
Status:Closed (fixed)» Active

There really should be an option to make the width responsive. This is something a very large number of websites need, since you have to include sites that have an old style fluid layout or mobile templates. That's a significant amount surely.

slamorte’s picture

This is an awesome workaround.

Would be great as a feature.

web226’s picture

Issue summary:View changes

Thanks! worked well for me too