Limit width of page content

[zerotoone.de]

Hey there,
got a page with contents of various sizes in the footer too. now I need a way to limit the content in its width and set spacing to the sides of the browser window equally.

Thanks for your help

[Prasant]

Hello @zerotoone.de,

Thanks for reaching out.

Under Section > Row > Setup turn off Inner Container. Once disabled, you will be able to setup width and max width of the section as per your requirement. Here's a screencast that you can take a look.

Thanks.

[zerotoone.de]

but I got different section some with multiple columns, what should I do in this case?

[Rad]

Hi @zerotoone.de,

That row setting applies to that current only regardless of the amount of the columns. But if the issue is having narrow columns, then maybe increase the size of the row.

Thanks!

[zerotoone.de]

so what values would you suggest for a responsive website, are there any common guidelines?

[RueNel]

Hello @zerotoone.de,

You should set a width and maximum width if you have disabled the inner container.
- width: 100%
- max-width: 1200px

The maximum width will limit the width of the row especially in bigger screens.

Hope this helps.

[zerotoone.de]

thank you, can you recommend any websites that got guidelines on spacing etc?

[RueNel]

Hey @zerotoone.de,

The spacing of the columns is basically 4% of the row width. If you do not want any spacing, you can enable the Marginless column option instead.

For element spacing, you can check out this knowledge base article:
- https://theme.co/apex/forum/t/customizations-element-spacing/211

Hope this helps.

[zerotoone.de]

Customizations - Element Spacing

This article was last updated on the May 9, 2018. In order for posts and pages to flow properly, all elements must receive some type of margin or padding to give adequate spacing. Headings by default receive a certain degree of margin up top to space a normal document out nicely. Think if you had a long page with just paragraphs and headings, this spacing is what would give your eye a visual break between sections. Additionally, the [content_band] shortcode and Cornerstone/Pro Editor Sections …

what about spacing to the sides eg. browserwindow? are there knowledgebase articles on pro?

[mldarshana]

Hi There @zerotoone.de

Browser window is not controllable through CSS. You need to use custom JavaScript for that. You can see some of our predefined CSS classes from here (https://theme.co/apex/forum/t/customizations-css-class-index/207).

You can also see all of our knowledge base articles from here (https://theme.co/apex/forum/t/knowledge-base-overview/287).

Thanks!

[zerotoone.de]

I just want my content to look good, the spacing to the left and right should be equal in all sections and footer

[thai]

Hi @zerotoone.de,

I could see you've added different paddings for each bar in footer:

Could you please try changing the padding to 0 to check if the spacings are the same?

Let us know how it goes!

[zerotoone.de]

okay I removed the padding, now I need the spacing around each bar to be the same as my content

[thai]

Hi @zerotoone.de,

Would you mind providing us with a screenshot how your footers should be?

Currently, it looks like this:

Screenshot

Thank you.

[zerotoone.de]

Please visit the Page on mobile or smaller screens and you will see

[Lely]

Hello @zerotoone.de,

Currently, your content section is fullwidth and container is 88% width.
To do the same on footer, edit Bar set content width to 88% too:

Technically, that will make it aligned on the container. But if you expect the content images left and right part to be aligned on the edge of footer content, that will not happened right now. This is because the content row ialignment is set to center. Your images is center while the footer is just taking the full 88% width.

Hope this helps

[zerotoone.de]

thank you, works great

[thai]

You're welcome.

[system]

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