Blockquote center box

[plumcreek]

I give. How can I center the quote boxes throughout the site? http://www.beyoutifulandblessedlife.com/makeup/

I added this to the Global CSS to change the color and that worked well: blockquote {width:90%; background-color:#FCE8E8;}

Tried adding various things to that line and some work and some not so much and I’m stuck.

Thanks!

Beth

[scrambler]

I cannot access your page (invalid link)

That said to center the block, add the margin property below

blockquote {margin:0 auto;}

the blockquote are already set to 90% width, you can use a different width value, or better you can use a max-width to make sure it does not get too small on phone

blockquote {margin:0 auto; max-width:500px;}

[plumcreek]

Sorry, DNS issues. I want the box to center, the text is centering fine.

[scrambler]

Still not loading the page, but the CSS I gave you should do the trick

[plumcreek]

Yeah, GoDaddy is struggling today, it’s back up now.

And nope, that margin stuff didn’t center the pink box.

http://www.beyoutifulandblessedlife.com/makeup

This is what I have in Global Custom CSS

blockquote {width:90%; background-color:#FCE8E8;margin:0 auto;}

Thanks for the neat trick about sizing it though, that will come in handy.

Thanks!

[plumcreek]

And I just made it 100% so it looks centered but we do want to do it at 90%. Customer is showing it off today, of course.

 

[scrambler]

I don’t see a blockquote in the page you link to.

Once you reduce the width gain with the centering margin, provide a link to the page that has the blockquote and specify where to look so I can see what is going on.

[plumcreek]

Ok, got the DNS straightened out and here are the real tests with a nice twist I found between the Global CSS and the per page version. Yes, I realize I can override it on the per page but that’s non-workable as the site grows. Or it’s just really bothering me more now to find out what the answer is. Different site, same versions of Weaver Xtreme Plus, etc.

http://theriverlist.com/test/ – Here I used Global CSS and the box stays left justified

http://theriverlist.com/test2/ – Here I overrode it on the page itself in the Xtreme Plus tab and it works.

Here’s the code used in each:
blockquote {width:50%; background-color:#FCE8E8; margin:0 auto;}

Thanks again!

[scrambler]

You need to add !important to the margin property as there is another WordPress rule overriding it

blockquote {width:50%; background-color:#FCE8E8; margin:0 auto !important;}

The per page worked because a per page rules adds the page selector to the blockquote selector, and that makes the whole selector stronger than the WP selector.

This is why inspecting the page with the browser developer tools help, it allows you to see what is overriding and how.

 

[plumcreek]

I was looking at the developer tools but you have to really know what you are looking at to get what needs to be changed and I’m an old programmer with VERY limited CSS skills. Thanks so much, this worked.

[scrambler]

You can read this if interested

https://guide.weavertheme.com/basic-tips-on-using-the-developer-tools-like-firebug-to-resolve-styling-issues/

 

[Author]

Posts