Change @media screen sizes in mobileangularui

Question

I am just starting a project in PhoneGap , Angular JS and mobileangularui .

I am aware that mobileangularui uses bootstrap CSS and has components written in Angular JS. I am testing the responsive grid of bootstrap in my project.

The default screen sizes defined in bootstrap for breakpoints are:

• xs: 480px and up.
• sm: 768px and up.
• md: 992px and up.
• lg: 1280px and up.

I would like to change these to custom values. If I was using bootstrap (without mobileangularui), I would have customized the values here and downloaded the CSS. But, how do I make these changes in mobileangularui?

Answer 1

Open the variables.less in <project-directory>\\bower_components\\bootstrap\\less .

Edit the following variable values:

@screen-xs:                  480px;
@screen-sm:                  768px;
@screen-md:                  992px;
@screen-lg:                  1200px;

@container-tablet:             (720px + @grid-gutter-width);
@container-desktop:            (940px + @grid-gutter-width);
@container-large-desktop:      (1140px + @grid-gutter-width);

Run gulp build again.

This will overwrite the app.min.css, responsive.min.css in your project with new screen size values.