nsitedesigns
asked on
facebook like box problems
Facebook Like Box doesn't display on Safari.
In Firefox, the verbiage in the box is very narrow. Is there a way to widen it? See screenshot below.
http://screencast.com/t/bO7uV1oh1l
http://uwofsc.org/
In Firefox, the verbiage in the box is very narrow. Is there a way to widen it? See screenshot below.
http://screencast.com/t/bO7uV1oh1l
http://uwofsc.org/
ASKER
it used to work ok at that size....
try adding the following code at the end of your stylesheet...
.storyInnerWrapper {
width: 110px !important;
}
ASKER
Nope, that didn't help.
you should be able to control it like this:
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
max-height: 400px !important;
background-color:#fff;
}
set your own width and other settings
good luck ...
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
max-height: 400px !important;
background-color:#fff;
}
set your own width and other settings
good luck ...
ASKER
That didn't work either. I didn't modify the width since it was already at 100%. I don't need the outside box to be bigger. i need the text to not wrap around the icon.
See link below. The red outline shows the current text margin. The green outline shows how it used to be and how we want to to display.
http://screencast.com/t/Z2yTHfCJo
See link below. The red outline shows the current text margin. The green outline shows how it used to be and how we want to to display.
http://screencast.com/t/Z2yTHfCJo
what class or id is the green box?
can you set it's padding?
can you set it's padding?
ASKER
I don't know. The "box" is generated by facebook.
yes i realize that it is ...
you may need to experiment and figure it out
try using the code i posted above and add padding:0px !important; - as a starting point if not a solution
you may need to experiment and figure it out
try using the code i posted above and add padding:0px !important; - as a starting point if not a solution
ASKER
DIdn't do anything. : (
what browser are you using?
if Chrome then just right click on the like box and select inspect element.
you'll be able to see what the different elements classes or ids are.
you can do the same with ff - i just don't know off hand how it's dev tools work.
that's what i mean by experimenting to figure it out.
see attachment
uwofsc.png
if Chrome then just right click on the like box and select inspect element.
you'll be able to see what the different elements classes or ids are.
you can do the same with ff - i just don't know off hand how it's dev tools work.
that's what i mean by experimenting to figure it out.
see attachment
uwofsc.png
ASKER
why isn't it helping you?
it shows you all the elements and their classes and id's - even inherited styles of everything that makes up the like box.
in the screenshot you have 1 element selected - if modifying it's style has no effect then move on to another one.
plus the style you add needs to be after the facebook code.
it shows you all the elements and their classes and id's - even inherited styles of everything that makes up the like box.
in the screenshot you have 1 element selected - if modifying it's style has no effect then move on to another one.
plus the style you add needs to be after the facebook code.
ASKER
because when i select the text "make plans to attend this event on March..." it doesn't display anything in the code view except highlighting the h3 tag. So, how do I tell which class is associated with the text of the event?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
was not able to solve problem.
ASKER
was not able to find solution but still gave points to this suggestion since it seemed the most logical.
i'm really sorry you didn't get the solution to work.
i went to your site and opened F12 tools and made the changes i described above.
once you discover what to do using that method you then add your own style which overrides the line that causes the problem.
such as:
<style>
.mainWrapper {
width: 97px;
}
</style>
note that fixes like this need to be placed on the page after the widgets script and style so that it can override the problem.
thanks for the points ...
i went to your site and opened F12 tools and made the changes i described above.
once you discover what to do using that method you then add your own style which overrides the line that causes the problem.
such as:
<style>
.mainWrapper {
width: 97px;
}
</style>
note that fixes like this need to be placed on the page after the widgets script and style so that it can override the problem.
thanks for the points ...
Open in new window
They set the width to 225, so it would be an issue with the website.