I made a simple test that will make my divs stack when the screen is smaller than a large screen. But how do I add additional stylings specific to when it’s a smaller screen?
For example, if my divs are stacked (because the screen is smaller), I don’t want them directly on top of each other- I want some margin vertically between them. This margin isn’t necessary when they are side-by-side. So how can I specify different stylings based on the screen size?
Bootstrap will fill the container that it’s in so yes, you’ll see that things are butted against each other. But if you have a paragraph within each of those columns there would be some margin.
I may not have explained that properly so someone with more Bootstrap knowledge please chime in.
I created a pen, based on yours, that show what I mean. The only thing I did differently was to create a div within each of your existing ones and put in a paragraph. I also removed the height restriction in CSS.
@Roma Thanks for doing that! But it seems like there should be some option for styling-dependent-on-screen-size other than relying on inherit styling properties such as the p margins?
I could envision wanting to make multiple formatting changes depending on whether it’s a small vs large screen, more than could be achieved than simply framing the sections in a p.
I realize you can do this with media queries but I guess I was thinking that the whole point of Bootstrap is to “handle” a lot of what media queries do?