Home › Forums › Weaver Xtreme Theme › Blockquote center box
- This topic has 10 replies, 2 voices, and was last updated 2 years, 1 month ago by
scrambler.
-
AuthorPosts
-
May 1, 2020 at 14:56 UTC - Views: 37 #64394
plumcreek
ParticipantI 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
May 1, 2020 at 16:24 UTC - Views: 37 #64396scrambler
ModeratorI 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;}
May 1, 2020 at 17:19 UTC - Views: 33 #64397plumcreek
ParticipantSorry, DNS issues. I want the box to center, the text is centering fine.
May 1, 2020 at 18:29 UTC - Views: 29 #64398scrambler
ModeratorStill not loading the page, but the CSS I gave you should do the trick
May 1, 2020 at 19:58 UTC - Views: 26 #64399plumcreek
ParticipantYeah, 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!
May 1, 2020 at 20:11 UTC - Views: 25 #64400plumcreek
ParticipantAnd 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.
May 1, 2020 at 21:08 UTC - Views: 22 #64402scrambler
ModeratorI 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.
May 2, 2020 at 14:40 UTC - Views: 20 #64406plumcreek
ParticipantOk, 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!
May 2, 2020 at 16:13 UTC - Views: 15 #64407scrambler
ModeratorYou 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.
May 3, 2020 at 16:03 UTC - Views: 9 #64421plumcreek
ParticipantI 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.
May 3, 2020 at 16:37 UTC - Views: 9 #64422scrambler
ModeratorYou can read this if interested
-
AuthorPosts
- You must be logged in to reply to this topic.