Any way to do a liquid layout with Scribe theme


I'm loving developing with Upfront! Its taken the mystique out of WordPress and almost turned it into "kiddie programming" for us non-web language speakers.

I showed my wife my vision of her "new" website. Overall, she liked it, but was less than thrilled that the content area was restricted to the size I had it. When I was piddling around with updating the current HTML based site for responsive design, it was a disaster, but I was able to set-up a somewhat "liquid" layout.

What I'm looking to do is to set the width of the "contained" layout to be 85% of the screen size (until she sees it, and wants it 80 or 90 :slight_smile:. And then size all the other elements within the contained size.

I looked at the "test" website in responsive mode and nothing scaled down at all. I would have expected things to resize appropriately based on screen size.

Thank you so very much!


  • Milan

    Hello Dewey

    Hope you are well today and thanks for asking us. :slight_smile:

    Unfortunately we are not supporting liquid layouts and our developers confirmed that it will not be supported soon in near future too. Actually there isn't any plan of adding this.

    However for different screen sizes you can utilize Upfront's Responsive View mode ( see screenshot below ) to view how your page looks in different possible screen sizes. :slight_smile:


  • Adam Czajczyk

    Hello Dewey!

    Thanks for the quick reply. When I view the site in responsive mode, none of the screen objects resize. How do I do that?

    The work the "Responsive Mode" works is that it's not the "preview tool" but the "design tool". To make site play well with different screen resolutions you will want to actually first design the site for "default" resolutions and then switch to "Responsive Mode".

    While in responsive mode you'll see the button on top of the screen that are: "Mobile (315px)", "Table (570px)" and "default (1080px)". The last one is the same as in "non-responsive" mode and the pixels values are the maximum screen resolutions for given mode.

    When you've got your layout designed for "default" mode, you will then want to use those buttons to switch to "Tablet" and to "Mobile" and make adjustments. You may resize image, re-position elements and so on. Then, after the layout is saved, it will be used according to the screen resolution of the device.

    This "Responsive View" tool will then let you adjust site layout so it would fit different screens.

    Also, how do I make the "contained" maximum size larger than 1080 for a desktop monitor/larger laptop monitor so the content fills the page more.

    You could address the ".default-breakpoint" or ".desktop-breakpoint" classes. This will not have much visual effect unfortunately as you'd need to examine the page and then address many more elements with CSS, however it may work if you change elements settings. You may want to give it a try by adding this to "Global Theme CSS":

    .desktop-breakpoint {width:1300px;}

    To make full use of it you would however add CSS styles changing size to pretty much all elements on your page.

    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.