I have a table of 4 columns using the Bootstrap 3 grid system. Instead of using the col-xs-*, which works great on mobile, I used the col-md-*. The reason was simple -- on mobile, I didn't want the icons to shrink down very small and wanted them larger and visible on mobile. When I switched from col-xs-* to col-md-* for these columns, the mobile would automatically stack the icons in the grid and keep them large -- which is exactly what I want.
Okay, all is well except that somehow this makes the document width get messed up, and the Options Menu (the three-bar popdown menu for mobiles/tablets) disappears because it's aligned to the document width, not the viewport width.
Does anyone know a good CSS fix for that common problem?
I found the cause of my problem. It wasn't because of the responsive columns. It was because inside my responsive columns, I was doing absolute positioning in a relative container so that my P tag would align to the bottom of a box, but then my text wasn't centered, so I applied this:
.box P
{
position:absolute;
bottom:5px;
left:-50%;
right:-50%;
}
When I did that, it caused the options menu to jump off screen. The fix was that I switched the left and right like so:
.box P
{
position: absolute;
bottom: 5px;
left:0;
right:0;
}
This centered that P tag text inside the responsive columns, but yet still allowed me to use absolute positioning inside a box of the grid that was set to position:relative. This caused the document width to act normal again and thus the Options Menu reappeared.
