Hello!
I’m working on the Random Quote Machine project. It’s pretty close to what I wanted and looks good on my desktop screen.
The thing is, the Bootstrap container I’m using doesn’t appear to be working as it should (for example, it doesn’t change its width to ‘100%’ on a ‘xs’/mobile screen).
I’ve been trying to find and error, but everything looks good on paper.
Any help will be appreciated!
I’m not a bootstrap user so I don’t have any specific advice to offer on your problem but in general I’d be tempted to say that using bootstrap might be overkill for this project. Really, the only thing you need on the quote box is a max-width and auto margins on the side to center it. If you are using bootstrap just for the sake of learning bootstrap that’s fine, but if you ask me it is adding way more complexity than you need for such a simple layout.
Hey! Thanks for your comment.
I totally know it’s overkill, but I wanted to take advantage of the fact that it’s a small project and try different frameworks at once. I also believed Bootstrap could help with responsiveness, something I often struggle with.
Small update!
I forked the project into a new one for testing.
I changed the layout a bit (got rid of a nested container I thought could be causing trouble) but the issue is still there. From what I’ve tested, it’d seem that the “column” div is applying the “col-md-x” class when it shouldn’t.
For example, If I add the “col-12” class, that means the column’s width should cover the whole width of the screen on devices with a width smaller than 576px. I tested this on mobile and the “column” div doesn’t change. But if I add the “col-md-12” class, which should be used on wider screens, then the div covers the whole width of the screen on mobile.
So, in summary, it’s ignoring my “col-x” and “col-sm-x” settings and I have absolutely no idea why.