Halogen - How to fix max width of main content?

Hi guys
i need to fix max width of the main content of the Halogen Template ( Michael David Design ).
This template is responsive but the content of the page extends to infinity; if the screen is large and I do full screen, the text that maybe is 10 lines fits to 3 lines. I don’t want to extend it more than 1000px.
There is a way to insert a CSS code inside the template to force this aspect?
I’d like to have the full screen like screenshot 1.

Do you have any advice?

If the theme doesn’t have any options for that, it could probably be done with custom CSS.
When asking for help like this it’s always best to provide a URL to a test page. Otherwise folks would have to own the theme and recreate the issue.

1 Like

ok this is another template but its from MDD too: http://www.puccetti.it/
the issue is the same.
Try to extend the window to full screen like screenshot4, the content width goes to infinity and text blocks is reduced to 4 lines; i’d like to extend to full screen but the content ( text & images ) fix to about 1000px maximum like screenshot5 and background goes to fullscreen.
Maybe insert CSS code into CSS panel’s theme like this:

section #padding,
{ margin:0 auto; max-width:1000px; }

I hope to explained myself well :blush:

Ok, any answer you get might apply to on MDD theme and not another.

Now looking at the sample you gave it looks like you are using “style text”. for a number of text elements. No <p> or <hx> tags.
You are using one stack joeworkman_stacks_justifytext_stack in the one section you pointed out. I don’t have that stack but you could apply some CSS to put a max width for that one element:

.com_joeworkman_stacks_justifytext_stack {
    max-width: 45rem;

Keep in mind when you specify a “max-width” it is to the individual element not the width of the window.
However, because the text is a <span> type element Centering becomes much more of an issue.

You could put a “wrapper” stack Joe Workman’s CSS box,( it’s free), put any text you want to have a max width assigned to it into it and add a class name.

This example uses “myClass”:

.myClass {
    max-width: 35rem;
    margin: 0 auto;

Again the width is for the element not the screen width. (rems are based on the base font size in the example you gave 16px, so 16 x 35)

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.