Bootstrap scaffolding not showing good on mobile

Question

I've designed my website in HTML/CSS and used latest bootstrap, website is looking fine but when I open this website in mobile its showing very small size of fonts on mobile.

Mywebsite

what I am doing wrong?

Answer 1

Viewport Meta Tag: Make sure you have included the viewport meta tag in the section of your HTML document. This tag is essential for responsive design and ensures that the webpage adapts properly to different screen sizes.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

The width=device-width property sets the width of the viewport to the device width, ensuring proper rendering on mobile devices. The initial-scale=1 property sets the initial zoom level, and shrink-to-fit=no prevents iOS Safari from automatically shrinking fonts.

Bootstrap Responsive Utilities: Bootstrap provides responsive utility classes that you can use to control font sizes based on screen sizes. Ensure that you are using these classes appropriately to adjust font sizes for different viewport sizes.

<p class="font-size-lg">Large text on all devices</p>
<p class="font-size-md">Medium text on all devices</p>
<p class="font-size-sm">Small text on all devices</p>

<!-- Responsive font size classes -->
<p class="font-size-lg-md">Large text on large devices, medium text on medium and small devices</p>

Media Queries: If necessary, you can also define custom CSS rules using media queries to adjust font sizes for specific screen sizes. Bootstrap's grid system and breakpoints make it easy to create responsive designs.

@media (max-width: 576px) {
  /* Define font sizes for small devices */
  body {
    font-size: 14px;
  }
}