How do I stop elements from moving around on a web page after the width of the page is sufficiently-CodePudding

For some context, I am learning web development using svelte and am designing a simple website to test my understanding of some fundamental concepts. I essentially have some text and a video on this web page I have designed, and the goal is for the content to remain readable even after resizing the page. Right now when resize the web page itself, the video and text resize as well which is what I want. However, once I make the web page small enough, the formatting of the text and video makes them unreadable/unwatchable.

I would like to essentially stop changing the size of the content on the page once the page width is sufficiently small. Once the width is below this set value, then the content on the page stays exactly where it is and the user will need to use the scroll bar to view the content on the whole page. For a more visual description of what I mean, the apple website (apple.com) shows this very well if you inspect the page and decrease the width.

I dont quite know what to even search to try and get already completed solutions of this problem, so I have not tried implementing anything yet.

CodePudding user response：

The easiet way to achieve this should be setting a min-width/min-height in a scrollable container (e.g. the page as a whole, via overflow: auto or scroll).

This should prevent the element from becoming smaller than the specified size which causes it to overflow its smaller parent, causing it to scroll.

Example:

.container {
  resize: both;
  overflow: auto;
  outline: 1px solid grey;
}

.content {
  min-width: 50ch;
}

<div >
  <div >
    <h1>Contents</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minima ipsam, iste molestias voluptates sunt, debitis, quae tempore reiciendis minus consequatur doloribus quidem voluptatem blanditiis fugit voluptas enim quos nisi impedit iure tempora suscipit. Atque, ullam. Ab rem explicabo dolore, sequi reprehenderit corrupti facilis praesentium, sit quibusdam ratione cum soluta!
    </p>
  </div>
</div>

If you resize the box horizontally, it should stop re-flow of the text at a width of 50 characters and show a horizontal scroll-bar.