# Media Query Bug
**URL:** https://forum.bootstrapstudio.io/t/media-query-bug/12699
**Category:** Bug Reports
**Created:** [March 19, 2026, 5:30pm UTC](https://forum.bootstrapstudio.io/t/media-query-bug/12699 "2026-03-19T17:30:23Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@floydmanfloyd](https://forum.bootstrapstudio.io/u/floydmanfloyd)
#### Post date: [March 19, 2026, 5:30pm UTC](https://forum.bootstrapstudio.io/t/media-query-bug/12699/1 "2026-03-19T17:30:24Z")
Is it just me or is there something wrong with the media queries. MD works fine, going to LG seems to not work and the LG media query kicks in at XL.
In the CSS for MD and LG it shows this:
At LG this should be showing
But it’s not.
When you go up to XL it shows:
In summary a container stays at MD 720px width and doesn’t expand until XL where it’s 1140px. It’s not resizing to 900px for LG screen
There seems to be a problem with margins and paddings at LG as well.
---
### Author:  [@catkin](https://forum.bootstrapstudio.io/u/catkin)
#### Post date: [March 19, 2026, 6:11pm UTC](https://forum.bootstrapstudio.io/t/media-query-bug/12699/2 "2026-03-19T18:11:55Z")
I don’t think I see any issues here, In Bootstrap 5, the default container widths are:
SM \>= 576px - 540px
MD \>= 768px - 720px
LG \>= 992px - 960px
XL \>= 1200px - 1140px
XXL \>= 1400px - 1320px
So for a normal `.container`, the 992px media query is the LG breakpoint, and 960px is the correct max-width there. Then at 1200px, the 1140px rule overrides it for XL. That part is standard Bootstrap.
---
### Author:  [@floydmanfloyd](https://forum.bootstrapstudio.io/u/floydmanfloyd)
#### Post date: [March 22, 2026, 2:41pm UTC](https://forum.bootstrapstudio.io/t/media-query-bug/12699/3 "2026-03-22T14:41:47Z")
Hi @catkin.
Your correct with the above so I’ve dropped a container into a blank page and set the view to LG as shown in the screenshot. If you select the container and look at the appearence tab the width is only 720px. It should be 960px.
---
### Author:  [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)
#### Post date: [March 22, 2026, 3:20pm UTC](https://forum.bootstrapstudio.io/t/media-query-bug/12699/4 "2026-03-22T15:20:11Z")
Your preview window in Bootstrap Studio is probably too narrow. Try clicking the “Fit to Canvas” button in the toolbar, select **LG** , and the width should be 960. If it still doesn’t fit, just shrink the left sidebar.
---
### Author:  [@floydmanfloyd](https://forum.bootstrapstudio.io/u/floydmanfloyd)
#### Post date: [March 24, 2026, 7:26am UTC](https://forum.bootstrapstudio.io/t/media-query-bug/12699/5 "2026-03-24T07:26:25Z")
@kuligaposten Tried that and it still doesn’t work. Also tried a reinstall and still the same. It’s not my css file either as all I’ve done to test it is drop a container on a blank page.
---
### Author:  [@floydmanfloyd](https://forum.bootstrapstudio.io/u/floydmanfloyd)
#### Post date: [March 24, 2026, 8:47am UTC](https://forum.bootstrapstudio.io/t/media-query-bug/12699/6 "2026-03-24T08:47:30Z")
If I change the 992px media query to @media(min-width:991px) and add the media queries {as shown below) to a stylesheet they work as normal.
