css code to resize embedded tweets
-
i wonder if you could provide me with the css code i’d need to resize embedded tweets a third small than the originals?
you’d helped me resize embedded videos earlier.
they just look far too large in a diary otherwise.
The blog I need help with is: (visible only to logged in users)
-
Hi there, the following resizes the embedded tweets to 75%. See what you think, and you can adjust as you see fit.
.embed-twitter { width: 75% !important; } -
hi, sacredpath,
how great you’ve responded so quickly! now, already in the css revisions, i have these five lines:
.embed-vimeo iframe,
.embed-youtube iframe {
width: 360px;
height: 240px;
}when i lay the new code in, will it just go on lines six, seven, eight?
when i highlight what you’ve provided, then paste it in a word document, it is in 2 grey boxes with 1 and 2, then the closing } on a third line by itself.
-
oh, and also: are there one or two spaces between twitter and {, width and 75%, and 75% and !important; ?
-
while i was waiting to hear back from you, i played around with it a bit.
first, line 6 was left empty when i pasted in the code. i tried both one and two spaces between the words and symbols above, and while both ways resied the tweets, it seems to be only the width that’s been affected, not the whole embedded tweet. so…pictures aren’t whole, text is cut off, etc. like this:
-
hello, sacredpath,
as i hadn’t heard from you for awhile, i deleted the code for now, so my link won’t show you that it resized the width of the Tweet, not overall.
if you have further hints, do please let me know. and i can always add the code you gave me to show you what i mean.
wd
-
Hi @wendyedavis!
When I use the code that thesacredpath provided, it doesn’t look like the images or text is getting cutoff in the embeds:
Is that what you’re seeing on your side?
As for implementation, the easiest thing to do would be paste the code separate from the CSS you’ve already entered like this:
So, you would replace the entire code you have with the following:
.embed-vimeo iframe, .embed-youtube iframe { width: 360px; height: 240px; } .embed-twitter { width: 75% !important; }The spacing between the code won’t really matter. You could do this instead in theory:
.embed-vimeo iframe,.embed-youtube iframe {width: 360px; height: 240px;}.embed-twitter {width: 75% !important;}It’s just a bit harder to read.
-
i’d have sworn that’s how the css looked when i played with it, jeremy. down to the 6th line being blank. but clearly, your test worked, so let me go try again.
i’ll be back, and thank you. ;)
wd
-
okay, i deleted all the code, pasted in yours (with no italics), and my test still looks like this:
http://cafe-babylon.net/2015/03/03/test-2/
what can i be doing wrong?
-
Hmmm, it seems like the Twitter image at top is coming in full size. If I go to the page you mention and see what you see above, and then narrow the browser window it corrects. If I make my browser wider, the image stays smaller for a while and then resizes correctly.
I’ve tried a number of different approaches to get the image to size correctly when first loaded, but since the code is an embed from Twitter, we have far less control over it in most cases – and in some cases almost no control at all.
-
i see what you mean. i clicked the ‘restore down’, then clicked ‘maximize’, and the entire image appears. same of the others on the page, as well. it seems the trouble is the horizontal tweets, sometimes with videos embedded in the tweets.
you started a sentence with ‘i’m….and didn’t finish.
wd
-
Hmmm, can’t think of where I was going with that. Could be a case of wrong window active when I started something.
-
ah; i thought you might have had an additional thought. i reckon that this is pretty much what there is to do? perhaps advise readers how to jigger the image? i tried control – , then control +; that worked, but eeeep.
wd
- The topic ‘css code to resize embedded tweets’ is closed to new replies.
WordPress.com Forums 