moving blockquote in Watson theme
-
Hi there,
I’m using the Watson premium theme, which I love and have customised somewhat, all with success. I’m about intermediate level with using CSS, but I’m stumped on moving the blockquote. Basically, I don’t want the blockquote to range all the way to the left. I would like it to sit in line with the main body text of the post, right, but also have a slight indentation in relation to the main body text. I can actually get it looking fine on my Macbook Pro, but when the browser window is reduced or seen on smaller devices, say, on an iPhone or iPad, the margin/indentation is moves relatively and becomes huge, resulting in a very narrow blockquote.
My site is at: istanbuldispatches.com & there’s a lengthy blockquote in this post: http://istanbuldispatches.com/2012/06/20/25463390543 just to show you.
The relevant CSS I’m now using is this:
blockquote {
float: none;
max-width: 100%;
position: relative;
}.entry blockquote p {
max-width: 100%;
margin-left: 8.6rem;
}
… which probably is not healthy in any way, but it works on your average laptop screen, with the browser window open full. In short, I’m sure I’m about halfway there with the relevant code to stop the blockquote ranging left. But the rest is beyond me. I hope you can help.The blog I need help with is: (visible only to logged in users)
-
The float and max-width values in “blockquote” have no effect, because “.entry blockquote” overrides them. And what you really want is to center your bqs rather than add a left margin. So try this instead of your solution:
.entry blockquote { float: none; margin-left: auto; margin-right: auto; max-width: 492px; } .entry blockquote p { padding: 0 20px; } -
-
-
Hi again justpi,
I prematurely closed this qu as resolved! I’m now having the same problem with placing an embedded tweet into a post of mine. That is, it is also floating left automatically, no matter what code I try to use. I know it’s of the “blockquote class” (as my WP posting html tells me) but I’m stumped again on finding the right code to identify & get it to center. Admittedly, I don’t have a published post to link to. The embedded tweet I’m using is in a draft. But if needed, I can set up a private published post & gove you access to show you. If this is all too cheeky of me, I’ll open up a new support forum question. If not, in short, I just want the embedded tweet to do exactly what the blockquote code above gets the blockquotes to do, that is sit in line with the main text, with a slight indent.
Thanks in advance. & apologies if this isn’t the right way to ask :)
-
But if needed, I can set up a private published post & gove you access to show you.
Yes, you can do that.
-
Thanks again!
http://istanbuldispatches.com/2013/08/07/untitled/
pw is your wp forum username :)
I’ve got no css code going on for the tweet (it’s after 2nd para), as everything I tried failed. I look forward to enlightenment! :)
-
I’m not sure about this, so we’ll be enlightened together!
Try adding this:iframe { margin: 10px auto; }If it doesn’t work, turn it to:
iframe { margin: 10px auto !important; } -
Thank you so much again CSS guru!
The 2nd & “!important” one nailed it.
We can consider ourselves enlightened :)
& thanks also for the speedy response, whatever time zone difference we’ve got going on.
— Jim
-
-
Thanks, Rich! But I’m not an expert, so I’m not comfortable with praise I don’t deserve. (I would be ok with it if it referred to inline CSS!)
-
Hi justpi,
Me again. I’m afraid we’re back to the drawing board (or “unelightened”!). I’ve only just noticed this, so apologies for not seeing it before, but the above code…
iframe {
margin: 10px auto !important;}
…while it did center the tweet inline with the text, it also caused other problems. In a nusthell, the same code has also moved all the share buttons below each post out of line. While I only have Facebook & Tweet buttons on display, they sit lower than everything else, and all the share buttons inside the “More” box are all over the place.
As embarrassing as it all looks, I’ve left the code in so you can see what I mean. I’ve created a new post though for this, which can be found at:
http://istanbuldispatches.com/2013/08/15/tweet-test/
Again, it’s a protected private post, but with the same pw as before :)
I’ve tried to solve it, but am again at a loss. I hope you can help.
Regards,
Jim
-
Hi again,
It’s been a few days now (4), & I haven’t had any repsonse. Could any body here help, if justpi is otherwise busy?
Just to reiterate, I wanted to center an embedded tweet inline with the main body text of a post (which gets treated like a block quote by the Watson them, so floats left). Justpi’s solution was to use th following code:
iframe {
margin: 10px auto !important;}
which solved the issue. But only after afew days did I notice that it also rearranged the share button logos (ie, they’re all over the place) presumably because the “iframe” code instruction tells them to also move.
I’ve set up a dummy private post with an embedded tweet to show the issue. It can be view at:
http://istanbuldispatches.com/2013/08/15/tweet-test/
The password to view it is “justpi”.
Thanks.
-
@colellajim, let’s make the selector a little more specific for the rule. Change the code you have to this and I think it will take care of the issue. Sometimes you just need a bigger digital hammer. :)
iframe.twitter-tweet { margin: 10px auto !important; } -
Thanks!
To be honest, I thought I tried that (maybe I came up with “iframe.standalone-tweet”… can’t remember!).
In any case, your digi-hammer whacked this one :)
— Jim
-
- The topic ‘moving blockquote in Watson theme’ is closed to new replies.
WordPress.com Forums 