Home Forums Air WordPress Theme Change Standard Page width (while maintaining full width on smaller devices)

This topic contains 6 replies, has 2 voices, and was last updated by  SeaTheme 9 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #17884

    Lookes
    Participant
    Purchased

    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.

    • This topic was modified 9 months ago by  Lookes.
    #17887

    SeaTheme
    Keymaster
    Purchased
    Supported

    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.comTwitterFacebook

    #17888

    Lookes
    Participant
    Purchased

    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…

    #17890

    Lookes
    Participant
    Purchased

    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…

    #17891

    SeaTheme
    Keymaster
    Purchased
    Supported

    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

    • This reply was modified 9 months ago by  SeaTheme.
    #17895

    Lookes
    Participant
    Purchased

    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?

    #17899

    SeaTheme
    Keymaster
    Purchased
    Supported

    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://www.uiueux.com/forums/topic/how-to-find-wordpress-postpage-id/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!