[Resolved] Container width makes post content overflow

[Author]

Posts

[julienL-5]

I am trying to: get a correct layout displayed on the page(s)

Link to a page where the issue can be seen: hidden link

I expected to see: the post content wrapped inside the post content area (see screenshot attached)

Instead, I got: post contents overflowing from the post content area, seemingly because there is a container element set by Toolset with a 1200px width.

I'm using the Astra theme but checked on the GeneratePress theme as well and the problem is the same.

I'm a bit confused by this behavior out of the box, as I would think that the CSS by default would have the contents wrapped up nicely and not overflowing.

[Luo Yang]

Dear Julien,

It is a CSS problem, I checked the URL you mentioned above, but I can only see this error message:
Parkour Base coming soon!
Please check it, thanks

[julienL-5]

Hi Luo, my apologies for that, I have excluded the URL from the splash page and you should be able to see it now.

Just for context: I initially installed Toolset with the Avada theme, and installed the Avada integration plugin. I have since switched to Astra and uninstalled the Avada integration plugin. Not sure if that could be part of the pb so wanted to mention it!

Many thanks!

Best,
- Julien

[Luo Yang]

Thanks for the details, I can see the problem in your website

The Layouts plugin are based on Bootstrap framework:
hidden link

The problem CSS codes you mentioned above is from Bootstrap:
hidden link
line 1216:

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Currently, you can setup some custom CSS codes to override above CSS settings, for example,

@media (min-width: 1200px) {
  .container {
    width: auto !important;
  }
}

See screenshot css.JPG

[julienL-5]

Many thanks Luo, that works well indeed. I will adjust it for each media query as well 🙂

Best,
- Julien