How do I increase page size?

Bootstrap Studio Help
1

When I create a new page it's fixed at 1024 x 600 px, how do I change this as I can't find an option anywhere?

2

You can update your page width and height by creating your own custom CSS and change the width and min height seething if you need to.

Unless you are referring to the preview window sizes that are set by Boostrap studio when editing in app which you can change by clicking the the icons in top right of the preview window panel.

3

The icons for different screens just change the width, the height is still fixed at 600 and all the content just overflows the preview page and isn't visible?

4

But you can always scroll down on the preview screen to see more of your design.

I'm sure Martin will be along shortly to provide a comment on why the preview window is a set height.

What monitor size are you using?

5

I've got it working now by copying all the content to a new window, think it was my imported stylesheet than was stopping the preview window expanding...

6

Glad you got it sorted in the end ?

7

Hi there,

I'm designing for a 1600x1200 resolution and would like to know if I can change the default page size? It doesn't seem like it can be done through css but if it can, I would love an example.

8

@schang,

By default Bootstrap's container class max's out at about 1200. However, you can get it to be full screen by changing the class from

<div class="container">

to

<div class="container-fluid">

In the Bootstrap Studio app, just select the container div in the Overview widget on the bottom left. Then in the Options widget on the top right, check the box for "Fluid".

If to max the site at 1600 you will need to create another "@media" break point in your custom CSS maybe something like:

@media (min-width: 1600px){
  .container {
    width: 1570px;
  }
}

Hope that helps,

Saj

9

Hi Saj: thanks for your tip! I followed your steps but it doesn't change the 1200 dimension of the web on my end. I created the Container, marked it as "Fluid" and the created a @media with the 1600 px and the dimension is the same.. Do we have another way to solve this? Or this is one of those problems that we have to wait for another version to solve? The 1200 screen doesn't cut it for a lot of projects. Thanks in advance

10

If your trying to change the BSS apps window viewport that's not going to change. You only have the media option buttons near the Options pane on the top right. Those are only going to be what the media break points are that Bootstrap says they support http://getbootstrap.com/css/#grid-media-queries

My suggestion was about allowing the preview/exported website to be able to expand beyond 1200px limit of the .container with the .container-fluid class that has no media query but then to cap the size around the 1600px screen size.

I'd have to know more of what your trying to do to see if I could help.

Saj