Scaling up from mobile

Bootstrap Studio Help
1

I'd appreciate some tips (step-by-step) on how to scale up with media queries from small devices (phones) to large (desktop). Thanks

2

That's kind of a tall order.

Basically the idea is that working with media queries with a min-width means any screen size that matches this value or is greater than it, the CSS that's in the media query rule will be applied.

This also means any screen sizes that are less than the value the CSS has in that same media query it does not apply to it.

For instance:

body {
    background-color: blue;
}

@media query (min-width: 768px) {
    body {
        background-color: red;
    }
}

The CSS above will set the background color of the BODY element to be blue unless the width of the browsers viewport is at least 768px wide or wider, then it will be red. So the blue background color will only be seen on screen sizes that are 767px wide or less.

So now if you want the background color to be green at a larger screen size you'd add the following.

body {
    background-color: blue;
}

@media query (min-width: 768px) {
    body {
        background-color: red;
    }
}

@media query (min-width: 992px) {
    body {
        background-color: green;
    }
}

Because of the Cascade(ing) Style Sheet (CSS) you want the larger min screen to come after the smaller screen other wise the green coloring would never be applied.

For instance:

body {
    background-color: blue;
}

@media query (min-width: 992px) {
    body {
        background-color: green;
    }
}

@media query (min-width: 768px) {
    body {
        background-color: red;
    }
}

So if you did it like above, you'd never see that green screen because the last statement of your CSS says any screen at least 768px wide or greater (including the min-width 992px) make the background red because the min-width 768px is more important than the min-width 992px in this scenario.

<hr />

To see how to do this in the app, just create a new Project so you don't mess with your existing one.

The in the Overview pane(bottom/left), select the BODY element. Then in the Design pane(bottom/right), select the Styles menu and expand it, then double click on styles.css.

The in the Styles pane(bottom/middle/right) in the styles.css tab click to make a rule for body the click in the rule to make a property for background-color hit TAB and enter in blue.

You should see a blue background for the Live View pane(top/middle). Towards the top right next to the Options pane is the Device Toolbar, has the icons that look like different screens. Click on the middle one for MD size. Then in the styles.css tab click on the triple stacked dots menu icon. Select duplicate. Then on the duplicated rule click on the menu dots and select Add Media Query. Then change the color in the property value from blue to red.

Then click on the Device size LG that's just to the right of the MD icon. Then in the styles.css tab click on the triple stacked dots menu icon of the duplicated rule. Select duplicate. Then on that duplicated rule click on the menu dots and select Remove Media Query. The click again and select Add Media Query. Then change the color in the property value from red to green.

Now you have the second example I stated above. You should probably read this to get a better understanding. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Saj

3

Saj,

Thank you so much for this detailed reply. It is a big help.