I’d love any suggestions for making it work properly at small screen sizes. How do I prevent the cards/images from resizing themselves to fit the screen, and the text from overflowing is container?
Hi!
Since you have bootstrap, you can try the col-md-4 class instead of your current col-4 on your cards. This will let the cards stack vertically on smaller screens.
Can also try col-md-6 for your form and the div next to it. This will allow those 2 div to stack also, which might solve your text overflow problem.
Hopefully that helps some, can try to help further if needed.
Thanks! That seems likem a good solution!
This is Bootstrap v4, so the col-4 is correct… col-md-4 is Bootstrap 3.
ETA! Sorry, col-md-4 is correct in v4 too… but thats not whats causing the problem, col-4 is still fine…its the card div.
@rainythunderstorm The div class card is throwing things off by messing with the built in bootstrap margin settings… by giving each card a fixed margin of 20px for a total of 40px per card, that is going to affect how your columns adjust down to mobile view.
Remove the card div, and make your adjustments, in percentages on the col-4 class.