Incorrect media query value is added when the XS breakpoint button is selected

Bug Reports
1

There are 5 media size buttons at the top of the preview pane indicated by icons: XL, LG, MD, SM, XS. These sizes correspond to bootstrap's initial widths.

When you press XL, the width will be 1200px. When you press LG, the width will be 992px. When you press MD, the width will be 768px. When you press SM, the width will be 576px. When you press XS, the width will be 360px.

These sizes can be seen at the top left of the preview pane in a width x height @ 100% format. So far so good.

When you press each of these media size buttons, you can generate a corresponding media query entry in the CSS file and it will be created and added for you automatically. For example, if you are at the XL size and you add an h1 tag entry to your CSS, you can click the 3 vertical dot menu at the left and select "Add Media Query" from the popup menu and the @media (min-width: 1200px) will be generated for you, based on the current width value. So far so good.

So now you can do the following:

When you are at XL, the media query will be added to you as @media (max-width: 1200px). You can verify at the top left pane that the width is indeed 1200px. When you are at LG, the media query will be added as @media (max-width: 992px). You can verify at the top left pane that the width is indeed 992px. When you are at MD, the media query will be added as @media (max-width: 768px). You can verify at the top left pane that the width is indeed 768px. When you are at SM, the media query will be added as @media (max-width: 576px). You can verify at the top left pane that the width is indeed 576px. However, when you are at XS, the media query will be added as @media (max-width: 300px) but you can can see at the top left pane, that the actual width displayed is actually 360px.

Yes, I know you can manually change all the values in the CSS, but that is not the point here. The point here is that the correct media widths will be added for each size (XL, LG, MD, SM) except for the XS size. The program adds 300px as opposed to 360px - which is the actual width of the preview area. Therefore, the program should add the value 360px at this point as opposed to 300px.

BStudio 5.0.2 macOS 10.14.6

2

according to https://getbootstrap.com/docs/4.4/layout/grid/ "While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size."

Extra small <576px  
Small ≥576px    
Medium ≥768px   
Large ≥992px    
Extra large ≥1200px

so it would make sense to me to add as a media query max-width:576 for XS. But since I design mobile-first, the XS is just default, and I usually only add queries for larger sizes

3

Its just a arbitrary setting the Devs have chosen in case you want to add an extra breakpoint setting for smaller phone sizes devices etc. I would agree though that this default of 300 px may be a little lower from what I have seen as more common 360 to 380 px range. Usually for fonts, image sizes etc on slower, smaller devices you might want to target using this custom breakpoint.