I am having trouble optimising my tribute page for mobile. I have a problem with the movie cover grid. The caption paragraph does not wrap in the div. Text is ‘overflowing’, causing some unwanted space to the right side of the page (when scaled down). Any solutions on how to solve this? I’m trying to keep it Bootstrap only. Is that possible? I tried using ‘figure’, but it didn’t work and I don’t know how to implement it in the grid.
Remove Bootstrap 4 from your CSS settings. You already have Bootstrap 3 (in the form of the flatly bootswatch… which is a great option that I use often instead of plain Bootstrap). Including BS3 and BS4 will cause conflicts and tears… only using one or the other.
Remove col-xs-4 from your col divs. This is forcing bootstrap to keep the divs in rows instead of stacking. Unless you truncate your text, it will always push out of fixed-size boxes.
With bootstrap, any sizing class that you don’t specify should default to 12 columns wide. If your smallest specified class is col-md-4, then anything smaller than md width should stack.
If you really want to leave the xs class in there, you could have a look at this css-tricks article, but it doesn’t feel like the best fit for your design.
This is a great answer! I think removing Bootstrap 4 fixed the issue. I just needed to refresh changes. Also I tried it on mobile and my grid stacks successfully (using col-md-4). It worked really well. Thanks for helping me!
