Change Standard Page width (while maintaining full width on smaller devices)

[Lookes]

Hi there,

I am currently trying to figure out the best way to change a standard page’s full-width to a contained/ boxed layout when the screen it wider than a certain number of pixels (such as 4k screens) so that the page doesn’t have extremely long lines of text.
Meanwhile, I’d still need the text to go back to normal as soon as the website is open on standard-sized devices, such as laptops, tablets and mobiles.

All the best,

L.

[SeaTheme]

Hi,

The container width could be set on big screen by custom CSS like:

@media (min-width: 1500px) {
  .container,
  .bordery20px .container,
  .bordery30px .container,
  .bordery40px .container {
    width: 1370px;
  }
}

Regards!
Bwsm – uiueux.com – Twitter – Facebook

[Lookes]

Thank for the fast reply. I tried your suggestion but no changes from my side.

I’m not sure whether this is linked to the fact that I am using the Page Builder and not the simple classic text editor…

[Lookes]

I’ve just tested to place the content without the BM Pagebuilder, and in that case the text is as I’d expect. When I am using the page builder, I am unable to format the text (such as spacing between paragraphs) nor do I seem able to contain the warp box or the text boxes within a certain area.
I am not sure whether this is a known issue, but I feel like I am having several problems when it comes to correctly displaying my content on the different pages when using the BM PageBuilder…

[SeaTheme]

I understood your question maybe, to define the Pagebuilder width, use the custom CSS:

.pagebuilder-wrap > .container-fluid,
.fullwidth-wrap > .container-fluid { padding-left: 20px;  padding-right: 20px; margin-right: auto; margin-left: auto; }
@media (min-width: 768px) {
  .pagebuilder-wrap > .container-fluid,.fullwidth-wrap > .container-fluid { width: 750px; }
}
@media (min-width: 992px) {
  .pagebuilder-wrap > .container-fluid,.fullwidth-wrap > .container-fluid { width: 970px; }
}
@media (min-width: 1200px) {
  .pagebuilder-wrap > .container-fluid,.fullwidth-wrap > .container-fluid { width: 1170px; }/*If you set the Main Container Width in theme options is 1170*/
}

I’ve just tested to place the content without the BM Pagebuilder, an
d in that case the text is as I’d expect. When I am using the page builder, I am unable to format the text (such as spacing between paragraphs) nor do I seem able to contain the warp box or the text boxes within a certain area.
I am not sure whether this is a known issue, but I feel like I am having several problems when it comes to correctly displaying my content on the different pages when using the BM PageBuilder…

There is no space between paragraphs, please use the blank row(screenshot) to add spacing.
Could you paste some screenshots or page URL to explain other problems? thanks

[Lookes]

Great that worked. Thanks a lot. How exactly would I change this code if I’d like it to be applied only to specific pages or posts?

[SeaTheme]

Please add page/post ID before className like:

.page-id-4804 .pagebuilder-wrap > .container-fluid,
.page-id-4804 .fullwidth-wrap > .container-fluid { padding-left: 20px;  padding-right: 20px; margin-right: auto; margin-left: auto; }
@media (min-width: 768px) {
  .page-id-4804 .pagebuilder-wrap > .container-fluid,.page-id-4804 .fullwidth-wrap > .container-fluid { width: 750px; }
}
...

refer to:
https://seatheme.net/forums/topic/how-to-find-wordpress-postpage-id/

[Author]

Posts