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

21tech commented
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

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

knalstaaf commented

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

a.ross commented
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

slamorte commented

This is an awesome workaround.

Would be great as a feature.

web226’s picture

web226 commented
Issue summary: View changes

Thanks! worked well for me too

technologywon’s picture

technologywon commented
Status: Active » Closed (works as designed)

Making these responsive should be done in the theme.

a.ross’s picture

a.ross commented

I don't think any other block module has an option to configure its width. That is inherently a styling/layout thing that a simple block module should not concern itself with.

So IMO it would be better to just get rid of the field entirely.