Page doesn't look good on XS (iPhone) and SM (iPad) sizes ... is there a way to

My page doesn't look good on the XS (iPhone) and SM (iPad) sizes ... when it shrinks that small, the graphics vanish and the main container doesn't resize vertically.

Is there a way to disable those views ... maybe by making the content (like the body) force a minimum width?

UPDATE: I found there is a min-width attribute on the body tag, and I tried setting that to something big enough (900px) but it doesn't have the desired effect. Even with min-width in place, I can shrink the width of the browser and mess up with the layout of the content at small widths.

Any other ideas?

The whole point in using Bootstrap is to make a responsive website. Why would you build in Bootstrap Studio if you don't want a responsive site? You certainly don't want to disable smaller screens sizes, as 60% of internet traffic these days is on mobile phones.

Bootstrap is a mobile-first framework, so you should design your site so it looks good at XS size, and then adjust as your screen gets larger. If you're doing it the opposite way (designing large to small) then you need to understand how breakpoints change the layout, and adjust accordingly. Sometimes you may need to hide certain components at larger sizes, and create different ones to display at smaller sizes. If you have images that are becoming too small to see clearly at small sizes, you may need different images. You may need to write CSS rules to change the size of fonts, etc.

It sounds like you are lacking a general foundation in how to build websites in 2020.

Thanks for the input. I will experiment with showing/hiding elements based on screen-size.

In the meantime, if anyone has any ideas on how to enforce min-width on content so the web page doesn't shrink to be too small on small screens, please let me know. Not sure why min-width on the body tag isn't working.

The Bootstrap framework is based on responsive layout and flexbox. "Shrinking" to accommodate smaller screens is fundamental to the containing elements. If you just want a static site, you're using the wrong program. To disable the responsiveness of the page, you need to remove the viewport meta tag, and override the width on every . container element using a fixed width (for example width: 970px).

It seems a bizarre approach. Why even bother with BSS if you're going to do this?

Thanks for the help. Very useful info. As you deduced, I'm new to Bootstrap and Bootstrap Studio. I'm used to coding everything by hand and I'm slowly getting used to the Bootstrap Studio approach.

I'm using Bootstrap Studio because it has proven to be a very easy way to drag-and-drop together a great looking website fast.

I will spend some time with the tutorials tomorrow.

Having a foundation in hand coding is very valuable. I suggest embracing responsive design, as it's pretty much the defacto standard now. It took me a few sites before I really got comfortable with it, but now I love it.