While working on an existing website, I am tasked with staying within the current boundaries. As I introduce a new feature, I realize that we already have several @media blocks in the CSS file. In order to maintain consistency, I have applied styling that is compatible with most of the browsers we are targeting, with a max-width of 1200px. However, for a few specific browsers, I need the same CSS to take effect at a max-width of 1300px. These particular browsers support the @media property, so now I need to find a way to identify which browser is being used in order to target the correct @media property. All other CSS should continue to work seamlessly across all targeted browsers.
In essence, I'm looking for something like:
@media (max-width:1200px) and (browser = xxxxx)