Centered layout for all pages

Hi @pcfritz

Do you perhaps want to change it so that only your header has the expanded container width? By changing all the container widths, the main content container is pretty wide. Let me know if I can help with this.

You contact page has two main content cells. Each cell is taking up 50% of the available space. The content within each cell is left aligned. With this in mind could you perhaps explain a little more about what should be centered?

Thanks ??

I want to have a layout like on these sites:

https://incub.ro/
https://www.rareview.com/

Thanks for the feedback.

The contact page layout is being managed by Page Builder so that’s where the control is. If you add your text using the Visual Editor widget you’ll find a center text button, just as you would when using the regular WordPress Visual tab. You can use that button to center align text within the Visual Editor widget. Beyond the Visual Editor widget the layout of say the Contact page as an example is in your hands.

At the links you said, could you perhaps indicate what sections of those sites your contact page content should look like?

Sorry, I didn’t write clearly what I want to say. Please take a look on this PDF:

https://drive.google.com/file/d/0ByEXtfzNEdn6ZVc4TFo1T1JnOXc/view?usp=sharing

The first spreadsheet how it is currently, but I want to have the layout on every page like in the second spreadsheet. Do you understand me now? ?? Is that possible?

Thanks @pcfritz, appreciate the feedback. You’re almost right. With regards to image 01, this is how it is setup:

1. Page Builder takes up 100% of the available space. This space is quite wide because of changing .container to 90% in your Custom CSS. Depends on the screen of course:

https://dl.dropboxusercontent.com/u/3072682/container.png

2. You have two cells in the row, each cell takes up 50% of the available space with content left aligned as default:

Cell 01:

https://dl.dropboxusercontent.com/u/3072682/50%25-cell-01.png

Cell 02:

https://dl.dropboxusercontent.com/u/3072682/50%25-cell-02.png

So why explain all this? Do you see how what’s actually being rendered is slightly different to your first spreadsheet item? Understanding the layout makes tweaking it easier.

What we could do is this.

Appearance > Editor > style.css. Restore the .container width to default:

max-width: 85.7143rem;

Then at Appearance > Custom CSS specify a container width for your header only, assuming you want that nice and wide:

/* Header */

.site-header .container {
	width: 85%;
}

That way we’re maintaining a more manageable content width for the content but still getting the header look I think you are after.

I have a few other ideas and will be online a bit later. Let me know your thoughts on my above idea and we’ll go from there.

Thanks ??

Hmm, I started creating rows with 2 more columns (p.e 15%, 35%, 35%, 15%). But I had to change the .contianer width back to 90%, because otherwise the content gets very strange on mobile devices… I think I’ll create every page with page builder and a 15% column on aech side… How can I change the 404 page not found page?

What are your other ideas?

Edit: Why did you choose 85rem instead of xx%?

I wouldn’t recommend doing that. The main problem is that your side columns will stack on mobile causing the spacing to be a lot greater than on desktop. Here is what I’d recommend:

Restore style.css:

Appearance > Editor > style.css. Restore the .container width to default:
max-width: 85.7143rem;

Make your header 90% width conditional

Appearance > Custom CSS:

/* Header */

@media (min-width: 680px) {
  .site-header .container {
      max-width: 90%;
  }
}

Remove our previous header container rule. The above rule means that below 680px resolution we return to standard container width.

Check where we are

With the above done, let me know and I’ll take another look at Contact and advise how to constrain further without creating empty columns.

Please note the above media query was edited.

Q: Why did you choose 85rem instead of xx%?
A: Ultra unfortunately isn’t a true full-width design. No particular reason. Right at the beginning of the process I decided to build a constrained layout. I think that for most users it’s easier to work with. I’ll look into providing options to change this in the theme.

Let me jump ahead here. At Appearance > Custom CSS insert the following:

/* Page Builder Custom Classes */

.constrained {
  	margin: 0 auto;
	max-width: 960px;
}

Then go to your Contact page for example and edit the first row. To edit the row settings click the wrench icon on the far right, click Edit Row then click Attributes top right and insert the following into the first field Row Class:

constrained

Note that there is no period in front of my class name. The name is up to you, as are the declarations I used at Appearance > Custom CSS.

I did the first steps as written. What shall I do next ? The steps you explained in the last step or do you want to take a look first?

Awesome. Next remove all the empty columns. They are going to make things complicated on mobile so let’s get rid of them and rather use the power of Page Builder and CSS Attributes to sort things out.

Done, but no difference… Did I understand you correct that I can leave the period in front of constrained, if I just insert the CSS as written?

Our new row style is working! Try changing 960px to 400px and you’ll see the difference. Your content is constrained. Previously it was stretching 90% or 85% of screen width. Now it’s only spanning 960px.

Did you have a chance to take a look at three screenshots I linked to? They are important to understand how your content is being handled within the Page Builder grid.