Search code examples
htmlcsstwitter-bootstrapresponsive-designmdbootstrap

How to set a max width for html div for mobile devices using css

On Desktop screens everything is responsive and okay. But on mobile devices content doesn't fit the screen, I have to swipe to the left to see all the content, is there anyway to fix that using CSS?

<div class="row mx-md-5 px-md-4 px-5 mt-3 container">
 <blockquote class="blockquote">

            <div class="mb-0">Quote...
            </div>

          </blockquote>

          <div class="article">
                 <h1>......</h1>
                   <img>
              <p>........</p>
              ...............
          </div>

        </div>

This just an example to work with. And btw I'm using Md-bootstrap as font end framework.

Solution

  • This div element has a width of 500px, and margin set to auto.

    div.container {
  width:500px;
  margin: auto;
  
}