CODEWITHSUNDEEP
htmlcssbootstrap-4bootstrap-carousel
Dpka
Dpka

Reputation: 246

Query regarding Responsive web page with Bootstrap grid system and CSS media queries

I have made a website with Bootstrap and used its grid system and CSS media queries according to col-xs, col-md, it is responsive but I had to set the font size according to the min-width in media query which makes it smaller when it reaches the max-width of the same media query. How can I adjust the font-size that it suits all the screen sizes in that media query? Do I need to write separate media queries for all the cases? Also the same for Bootstrap Carousel.

I want to achieve similar look on all sizes, is it possible?

Upvotes: 0

Views: 131

Answers (1)

SubSul
SubSul

Reputation: 2563

You can use media queries to set font sizes for different view ports. Target the base font size and everything will change.

Sass mixins -

@include media-breakpoint-down(xs) {
  body{font-size: 10px;}
}

@include media-breakpoint-down(sm) {
  body{font-size: 14px;}
}

Less -

@media (max-width: @screen-xs) {
  body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
  body{font-size: 14px;}
}

You can also use CSS VW units which sizes things relative to the current viewport size.

From CSS tricks -

enter image description here

Upvotes: 1

Related Questions