Centering content blocks with the "stretchy" layout

zubenelgenubi · July 25, 2014

Hi,

I have what I hope is a simple question regarding page layout.

If I customize a smugmug page to use the "fixed" layout, then I'm given the option to specify that content blocks (a text box, for example) will be centered horizontally on the page. That's good; there's lots of times when I'd like that. But to use the fixed layout you have to specify a fixed pixel width, which seem like a bad idea given the huge range of screen resolutions that clients might use when browsing content.

So I'd far prefer to use the "stretchy" layout. But when I select that, I lose the option to center my content blocks. (I can't imagine why?) In any case the only way I can see to *force* a text box to be centered under the stretchy layout is to specify 100% for its width. This often looks ugly. So, does anyone know of a way to specify that all content blocks will be centered when used in the stretchy layout, even if their width is significantly less than 100%? Well actually, I'd be happy for now if I could just make a text box that is less than 100% wide be centered in the stretchy layout. I'm guessing there's a simple property I can set using some CSS code to achieve this. Not seeing any previous posts explaining how to do it, I even tried guessing how to do it in CSS, but so far without luck.

So, if anyone knows how to do it, I'd love to hear the solution!

Thanks,

- Mark

denisegoldberg · July 25, 2014

I think this goes beyond aesthetics - I find that text boxes that stretch across a wide screen are somewhat uncomfortable to read.

You might try a variation of the code that Hikin' Mike posted in the thread Centering a content box.

--- Denise

Allen · July 25, 2014

Every content box has a class name and you could probably use that to set a width and center the box.

.sm-page-widget-1234567 {
width: XXXpx;
margin: 0 auto;
}

Might play with min-width and max-width.

zubenelgenubi · July 26, 2014

Denise,

Thanks - I looked through Hikin' Mike's thread, as you suggested, and indeed I did find the solution I was after. The "margin" property did the trick for me. (See Mike's thread for details of what worked for me.)

Thanks,

- Mark
URL]http://zubenelgenubi.smugmug.com[/URL

denisegoldberg wrote: »

I think this goes beyond aesthetics - I find that text boxes that stretch across a wide screen are somewhat uncomfortable to read.

You might try a variation of the code that Hikin' Mike posted in the thread Centering a content box.

--- Denise

Hikin' Mike · July 26, 2014

zubenelgenubi wrote: »

Denise,

Thanks - I looked through Hikin' Mike's thread, as you suggested, and indeed I did find the solution I was after. The "margin" property did the trick for me. (See Mike's thread for details of what worked for me.)

Thanks,

- Mark
URL]http://zubenelgenubi.smugmug.com[/URL

Glad to help.

Centering content blocks with the "stretchy" layout

Comments