Possible to combine stretchy width and fixed size on same page?

bokehlover71

I think it would be nice to have a big picture that goes all over the top of the page, independent of the browser size. But below I have a text box, and for maximum readability it shouldn't be too wide. The ideal is a fixed size. But is this an impossible combination?

denisegoldberg

@bokehlover71 said:
I think it would be nice to have a big picture that goes all over the top of the page, independent of the browser size. But below I have a text box, and for maximum readability it shouldn't be too wide. The ideal is a fixed size. But is this an impossible combination?

You should be able to specify a width for the text box. Click the dimensions icon for the text box and adjust the container width.

Allen

From what I remember the width changes in a widget triangle from % to px whether stretchy or static
width is checked in layout. Is this still true?
I think that means a static width has to be set in CSS for the widget if the page is stretchy.

bokehlover71

@denisegoldberg said:
You should be able to specify a width for the text box. Click the dimensions icon for the text box and adjust the container width.

If a page has a fixed size, I can enter a pixel width for a text box. But if the page layout is stretchy, I can only enter the text box size in percent.

Allen

@bokehlover71 said:

@denisegoldberg said:
You should be able to specify a width for the text box. Click the dimensions icon for the text box and adjust the container width.

If a page has a fixed size, I can enter a pixel width for a text box. But if the page layout is stretchy, I can only enter the text box size in percent.

See my post before this one.

bokehlover71

@Allen said:
See my post before this one.

Thanks, that's exactly what I mean. But how can I use CSS for this? I am not very experienced in web design.

Allen

When logged in go into customize on top menu.
Customize > Content and Design
In the right flyout.
Whatever the page is click "+ Make This ... Custom"
If it is a page it probably already has "Just This Page" highlighted.

Also whatever type of page is highlighted in flyout, folder, gallery or page, any change you make will
apply to every one of those types of your site. So it's very important to make the page, folder, gallery
independent (stand alone) and not apply your changes to, example, "all galleries".
So make sure "Just This ...." is highlighted.

From that flyout you can drag out to the page different widgets like a text box or html box
from under the "Add Content Blocks" section. Scroll down and see all the things you can add.
HTML & CSS is at the very bottom.

Drag a CSS box/widget out to the page and place it just above your footer. This is where you will add any
CSS applying to just this page. (The word "page" is generic and is whatever you're looking at, a folder, gallery or page.)

The widget name used in CSS can be found using "Inspect Element" which some here can help you find it.
Example to put in CSS.
.sm-page-widget-1234567 {width: 600px; margin: 0 auto}
The auto R/L margin will center the widget on the page.

bokehlover71

Thank you very much! I will try this out.