Let’s say when I want to adjust elements that have the flex wrap property at a certain window width. The following happens. Let’s say on Google Chrome at the same width, the flex wrap and @media settings match, but on other browsers like Mozilla and Opera, @media and flex wrap or auto-fit do not match, so it is impossible to match, flex wrapping and @media on all browsers. So this leaves space at certain widths where the elements of the web page are unorganized. I assume this happens because different browsers have different widths of the vertical scroll bar. How to solve this? What I tried was instead of using @media I used @container. But I cannot use @container for all occasions, for example to change the :root variable. Using JavaScript for media queries complicates things too much and I believe slows down the page. What is your recommendation?
Can you show us some example code where this occurs?
This is not a specific example. In this example, of course, it is not good to use a fixed width for elements, but I wanted to show that it behaves differently on different browsers. Here, for example, I reduce the width and font of the elements in order to fit two elements in one row on a screen size of 523px. In Firefox, when the browser width is gradually reduced from two elements in a row, it immediately transitions to two elements in a row with a reduced width and font, while in Google Chrome the transition goes from two elements to one and then back to two elements in a row with a reduced width and font. In my specific grid system, I am forced to use a fixed size for elements due to the complexity of the grid and I also have pseudo elements that are inserted for different screen widths. Let’s solve the width of both elements and pseudo elements with @container, but since I use the :root variable for font size, it doesn’t fit in @container, so I’m forced to change the font size individually.
The media queries work on the width of the viewport including the scrollbar. As some browsers have no scrollbars (as on a mac) and others have various sizes you need to ensure that your media queries allow about 20px breathing space as the classic scrollbar is 17px I believe.
In your example simply setting the width to 545px should catch all.
@media (width < 545px) {
Never set an element to the width of the media query as it is not guaranteed that you will have that actual space available.
In responsive design you should not be hunting down exact pixels most of the time but allow some leeway. In most cases it should not matter and remember that there an almost infinite number of device sizes these days so don’t end up chasing devices. Just be a bit more flexible in your media query breakpoints and don’t set them at the exact point your own browser happens to break but do it earlier than that.
As an aside it should be noted that on my PC, Chrome and Firefox behave exactly the same and show the same display at the media breakpoint.
Thanks for the good advice. Sorry for the questions like these, I’m new to this world, I still have a lot to learn. I think I’m focusing too much on the desktop version and neglecting the design for other devices, hoping that @media will solve everything. 