HOW TO INCREASE BLOCK (1Row, 2 Colomns) size

Bootstrap Studio Help
1

Hello everyone, I have chosen Block 1Row, 2 columns in BBS. I see that the width is 1193 px. Now i want increase this size, How can I do it? I want this block more expanded? Can you help me? Thanks

2

I would strongly suggest that you not change the default block widths. They are preset to values that fit the different screen sizes that may be viewing your web site some day. But if you really want to, just select the block in the Overview panel then in the Look & Feel panel change the default width for each screen size to what you want.

But again, I would not do this unless you have a very precise reason to change the defaults.

3

Dear Sir, I thanks you for your response. So i have a real reason to want this. Expand th width of block (1row 2 coloms) There is website that i like its design. But when i try to reproduce the similar design with BBS, i see that the 2 coloms of this website is very not expanded like my model. Because my design has more space at the right and left side. You can see it in these two pictures i send to you. Please help me The model design is enter image description here My design with BBS is enter image description here THANKS

4

check that website source:

@media(min-width:1201px) {
  .main>.container>.row {
    margin: 5px
  }
}

@media(min-width:1600px) {
  .main-area.col-lg-8 {
    width: 70%
  }

  .slidebar-area.col-lg-4 {
    width: 30%
  }
}

@media(min-width:1400px) and (max-width:1599px) {
  .main-area.col-lg-8 {
    width: 67%
  }

  .slidebar-area.col-lg-4 {
    width: 33%
  }
}

@media(min-width:1200px) and (max-width:1399px) {
  .main-area.col-lg-8 {
    width: 65%
  }

  .slidebar-area.col-lg-4 {
    width: 35%
  }
}

@media(min-width:992px) and (max-width:1199px) {
  .main-area.col-lg-8 {
    width: 62%
  }

  .slidebar-area.col-lg-4 {
    width: 38%
  }
}

@media(min-width:992px) and (max-width:1200px) {
  .main-area.col-md-8 {
    padding-right: 0
  }
}

@media(max-width:991px) {
  .main>.container {
    padding-top: 80px
  }

  html.js-menu-open .main>.container {
    padding-top: 15px
  }
}

@media(max-width:480px) {
  .main>.container {
    padding-top: 52px
  }
}

@media(max-width:991px) {
  .main>.container {
    padding: 55px 0 0 0
  }

different breakpoints produce different layouts.

5

That's not really a breakpoint issue he's asking about, it is an adjustment. Just copy the default classes for those columns/rows that need to have the margin or padding adjusted and change it so it matches your screenshot. That is basic HTML and CSS that you need to work with on that.

I change those settings all the time for my client's sites as they don't all want the same look. Some want full width content areas along with the full with header and footer and some want the content area smaller than the header and footer and some don't want any of it to fill the page full width. Everyone is different so yes... there are times you will want and need to change those default settings.

I would also suggest you remove the contents from the "block" and put them into either a column, row or div, depending on the structure of the area. That will also add more correct paddings and margins to the container it's in rather than keeping it in a default block.

Play with the columns and rows settings (after you remove it from the block) and eventually you will find what you need in order to remove the gaps and excess margins or paddings you are experiencing.