0

I made a page using Bootstrap and Galleria. It is a gallery page that has a navbar, so I tried to make the gallery fit in the most remaining space possible. Its width is defined as 100vw, so it should just fill the rest of the page, but it instead has a margin that begins before the end of the normal element and that creates a scroll bar for the page. I could remove the bar with body{ overflow: hidden; }, but there are two probloms with that:

1) The space between the arrow buttons and the border of the page is not symmetrical, and

2) There is a big blank zone on small screens at the place where the faulty margin is, which is only an extension of the previous problem, but is even more apparent and would make the site bad for mobile.

Here is the code: https://codepen.io/algorev/pen/wpjqar

Spooikypok_Dev
  • 183
  • 8

1 Answers1

1

In Bootstrap, rows should be wrapped in a container (in your case container-fluid) and only columns can we immediate children of rows.

  • Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
  • Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
  • In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
  • Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples.

With these rules applied, your mark up should look like

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="galleria">
      ...
    </div>
  </div>
</div>

(Note that this leaves 15px margins in the right and left of your page, so make adjust your column background color accordingly to match the gallery.)

Docs: https://getbootstrap.com/docs/4.0/layout/grid/

Pete TNT
  • 8,293
  • 4
  • 36
  • 45
  • It actually causes the opposite problem in my case, the margin just moves to the left and the scrollbars disappear, but it is clearly visible that the site is assymetrical, borderline unusable on mobile. I tried to make a second pen of it (https://codepen.io/algorev/pen/QaxyxB), but the results shown are not what I see on my version. – Spooikypok_Dev Jan 12 '18 at 15:38