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:
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?
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.
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.