CSS/Bootstrap Grid Help

CSS/Bootstrap Grid Help
0

#1

Hey everyone! I’m still working on some of the feedback for my tribute page here: http://codepen.io/celenajasmin/pen/OXqPzL.
One of which is the issue on smaller screens, a horizontal bar appears and this happens:

@Naqin has advised that:

In bootstrap the order of the elements is like this: container > row > columns. Containers basically wrap all of your content, and direct children of row elements may only be col elements. Putting the row above the others is actually what’s causing that little scrollbar at the bottom. Some good reading is in the Bootstrap docs: http://getbootstrap.com/css/#grid1

Not fully understanding the grid before I started coding, my code looked like this:
`

`

…and so on. I did it this way because I wanted the background to span the entire row while keeping the content inside. Is there a way to achieve the same appearance and get rid of the scrollbar in smaller screens?

Any help would be much appreciated :smiley: Thank you!


#2

Hi :slight_smile:

You can hidde the scroll bar with :

/* Content is clipped, with no scrollbars */
overflow-x: hidden;

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

But, your code don’t comply with Bootstrap:

Using http://www.bootlint.com/#byDirect

  • E03 Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
  • E013 Only columns (.col-*-*) may be children of .rows
  • E014 Columns (.col-*-*) can only be children of .rows or .form-groups

E03 :

E013

E014

if you make a pen following the Bootstrap documentation we can try to find a solution for that problem :thumbsup:

Cheers and happy coding :slight_smile:


#3

The tricky thing is to keep the background full width, while keeping the content within a container width.
Turns out you can actually also do something like: div > container > row > columns.

I hacked up a quick pen to show this: http://codepen.io/anon/pen/dXBKPJ

When you do this, be sure not to change the size of the upper parent div (.bg-section in the example) . Changing width, margin or padding may break bootstrap responsiveness. This is also why the bootstrap docs state you can’t nest multiple containers – they both have padding.


#4

@erretres Thank you for this! I’ll definitely follow the Bootstrap documentation for my next challenge :smiley:


#5

@naqin THISSSS. This is exactly the thing I was trying to go for. Thank you so much for your help! :slight_smile: I’ll definitely take note of everything :smiley: