CODEWITHSUNDEEP
cssbootstrap-4angular7
3gwebtrain
3gwebtrain

Reputation: 15303

Custom Media query across application

I am using angular7 app with the bootstrap 4.2.1. there is no.of breakpoints the bootstrap has, but i require only 3 break points. so i changed in 3 break points like this:

@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints';

$grid-breakpoints: (
    sm: 320px,
    md: 767px,
    lg: 1024px
);

$container-min-widths: (
  sm: 320px,
  md: 768px,
  lg: 1024px
);

@import "~bootstrap/scss/bootstrap";

@include media-breakpoint-up(lg) {
    body{
        background:green;
    }
}

@include media-breakpoint-up(md) {
    body{
        background:yellow;
    }
}

Now my app only has 3 break points and min widths. when i write a class property for md it applies in lg as well. what is wrong here. how to customize in to 3 breakpoint and write the properties to them?

Upvotes: 1

Views: 67

Answers (1)

Αntonis Papadakis
Αntonis Papadakis

Reputation: 1240

In bootstrap's documentation here https://getbootstrap.com/docs/4.2/layout/overview/#responsive-breakpoints I found that media-breakpoint-up means min-with not max-with.

From documentation:

Hide starting at min-width: 0, and then show at the sm breakpoint

    .custom-class {
      display: none;
    }

    @include media-breakpoint-up(sm) {
      .custom-class {
        display: block;
      }
    }

I think you should use media-breakpoint-only as bootstrap says:

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

For example this

@include media-breakpoint-only(sm) { ... }

means

@media (min-width: 576px) and (max-width: 767.98px) { ... }

Also check out media-breakpoint-between.

I hope I gave some help.

Upvotes: 1

Related Questions