Jump to content
Sign in to follow this  
millerwhite

Center align boxes within boxes section

Recommended Posts

millerwhite

Hi, all. I've been trying to tweak the CSS on this for some time now, and can't seem to find the right combination / settings. (I do use Firebug, which is invaluable to be sure). I have a client that has a row of 5 sponsor logos on their site. I used a boxes section to implement these. The thumbnails are set to "Image only, no text", as the client just wants these to be the logo image, which goes to the sponsor's site when clicked. By default, the boxes align from left to right, which usually is no problem. What they'd like to do, however, is make it to where when they add or remove a sponsor logo, the boxes expand / contract from the center, so that the row of logos is always center aligned. I've done this before on a different site, but using the same css is not doing the trick in this case. I hope my description makes sense. They basically want it to where, if they have one logo, it's right in the center of the bar. Then, if they add a second logo, the first one shifts left to accommodate the next one, but they are still center aligned within the boxes section. Thanks for your help!

Share this post


Link to post
Share on other sites
Henry Perkins
Have you tried defining the padding as a percentage? IE [code].class { padding: 10px 2% 10px 2%; width: 96%; margin-left: auto; margin-right: auto; }[/code] Hope this helps!

Share this post


Link to post
Share on other sites
Rob
I've been on this 30 minutes and tried every CSS trick I can think of but I don't think it's do-able. I suspect that the boxes are aligned left somewhere in code (hard-coded) but can't be sure of that. I'm not sure if this might help or not: http://wordpress.org/extend/plugins/boxer/ It's possible that can be centered because it's done with a plugin. Honestly, with apologies, I just don't have an answer. If Henry's suggestion works, go for it!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
WebWerx
Try using this instead of Boxes: http://www.pagelines.com/store/sections/contentbox/

Share this post


Link to post
Share on other sites
Rob
An excellent option.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
millerwhite
Yeah, I've used the Content Box before for other things. In this case, they would need to manually edit the code when adding / replacing / editing the content (or in this case, image and link) of each box, correct? They don't really have knowledge of css / html, so that's why I'd gone with boxes, so they could easily upload the images, add /remove boxes, etc. The way I did it on the other site was I used [url="http://wordpress.org/extend/plugins/simple-image-widget/"]this widget[/url], and then edited the CSS to have percentage margins, similar to what Henry noted above. So, with the content box suggestion, would I need to (or be able to) make the content box a widget area, and then use the same process / widget as above?

Share this post


Link to post
Share on other sites
Rob
Well, you could add the boxes to the content box. While it won't center them, it would eliminate lots of whitespace. Another alternative might be to engage one of our pros to customize a boxes section or create a plugin for your specific need. http://www.pagelines.com/pros. I couldn't find any CSS solution to resolve this customization.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
nikmark
Hi, I'm trying to do something similar with a couple of widgets (Facebook and YouTube) in the universal sidebar (get them centered in site). I made the width of the widgets wide enough to look centered, but on mobile device widgets don't "respond" like the rest of the site, so I figured I could make the widget width smaller to compensate but they align to the left by default. If someone could point me in the right direction to figuring this out, or an alternative, that would be great!! http://redsunrisingband.com/wordpress

Share this post


Link to post
Share on other sites
catrina
I think since you're trying to make your widgets responsive on a mobile device, your issue would be better suited for a separate topic. Can you please post your issue and your site in a new topic?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
sidianmsjones

This is unfortunate. I'm trying to do the same (center the boxes).

Share this post


Link to post
Share on other sites
James B

Hi Sidian

 

Please create a new post for this with exactly what you're trying to do (screenshots if possible) and we'll take a look for you. This thread is over a year old so there could be other solutions now we could try.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×