Can anyone tell me how to define the max-width for the container? I don't have the Pro version, which means custom CSS doesn't work properly. I need an alternative method.
I tried setting the container width in the Layout tab, but it's still full width. I expected it to be 1200px wide and centered. How can I fix this without using custom CSS?"
Can anyone tell me how to define the max-width for the container? I don't have the Pro version, which means custom CSS doesn't work properly. I need an alternative method.
I tried setting the container width in the Layout tab, but it's still full width. I expected it to be 1200px wide and centered. How can I fix this without using custom CSS?"
I am new here so I can not post a comment to get more information. I do have Elementor Pro, but the container layout settings are also available on the free version of Elementor.
It sounds to me like your container may be embedded inside another container. If you have set the container (flexbox or grid) to full width (100%), it will display the width to the max allowed by the parent container.
For example, if I have 3 containers (all 33% width, arranged horizontally) embedded in another container (100% width), the 3 will be evenly spaced across the entire width of the display. However, if I change the parent container to 50% width, then the 3 will be spaced evenly on the 50% of the display. This also would affect the centering - it would be centered within the parent container not the full display.
You do not need custom CSS to set these layout properties. If this isn't the problem, please respond with more information.
To set a max-width (like 1200px) and center your container in the free Elementor:
Select the Section.
Go to Layout tab.
Set "Content Width" to "Boxed".
Set "Width" to 1200 px.
Set "Horizontal Align" to "Center".
This uses Elementor's built-in settings, no custom CSS needed.
