tabler ui too small on mobile device

[JobberRT]

Hi, thanks for this excellent project! And sorry for this noobie question, I'm new to frontend and tabler

I develope a dashboard with tabler, and it looks amazing on desktop. But on mobile device, every ui compoent is too small to read, have to zoom in every time page refreshed.

Screenshot:

Desktop

Mobile(Chrome Dev for convience, same appearence on real device)

HTML

I'm using page-wrapper or page page-center as root div, and container,row row-cards, card as child.
I remember bootstrap will wrap/collaspe on mobile, and will zoom in to let component become larger for better viewing on mobile devices. How can I achieve this?

[Ebuka636]

To achieve the responsive behavior that Bootstrap provides, you can use Bootstrap's grid system, which consists of rows and columns. The rows represent a horizontal grouping of columns, and the columns represent the actual content. The grid system uses a series of breakpoints to determine how the content should be displayed on different screen sizes.

Here's an example of how you could structure your HTML using Bootstrap's grid system:

html
Copy code

In this example, we've used the container class to create a fixed-width container for our content. Within the container, we've created a row and added three col-sm-6 col-md-4 columns. This means that on small screens (defined as sm), the columns will take up 6 out of 12 available grid columns (i.e., half the screen width), while on medium screens (defined as md), the columns will take up 4 out of 12 columns (i.e., one-third the screen width). The card class is used to style the card content.

When viewed on a small screen (e.g., a mobile device), the columns will automatically stack vertically, making it easier to view the content. Additionally, Bootstrap's responsive behavior also includes things like adjusting font sizes and margins to optimize the display for different screen sizes.

Note that to use Bootstrap's grid system, you'll need to include the Bootstrap CSS and JavaScript files in your project. You can either download these files and include them manually, or use a CDN (Content Delivery Network) to include them directly in your HTML.

[JobberRT]

Oh right, bootstrap grid can work this out. BTW the copy snippet broke, could you provide a new one? Thanks!!

[Ebuka636]

//<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <div class="card">
        <!-- Card content here -->
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="card">
        <!-- Card content here -->
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="card">
        <!-- Card content here -->
      </div>
    </div>
  </div>
</div>

[JobberRT]

Ohhh, so this is like "traditional" bootstrap synatx, I got it, thanks!