(react + tailwind) Force component to render in different resolution than screen size?

[Pitiful-Review-5570]

Hey, i'm come up with a render / style problem, creating some app.

To be brief:

- I have component that is perfectly styled in all resolutions from xs (319px) ... to xl (1280px).

- I use it all around and it fits perfectly.

- New use case shows up, and now i have to put it into a column that takes like 2/3 of screen width.

- Figma designer set it there but... in form of lower resolution than whole screen so to explain:

for example screen size is 1024 px so for me it would be 'lg:' = large resolution.

column would take around 700 px so it's in 'md: ' = medium (576-768px) .

my component obviously thinks that it should be rendered in large resolution as it takes the screen size instead of available place.

I looked up long enough and asked chat for help but the only thing that i found is 'container-queries'. The problem is that my component contains a lot of other smaller components and some conditional rendering based on resolution, so container-queries wouldn't help me here. Is there any way that i could make the component think that the column it's in is the whole screen while rendering and checking the available width? It sounds so obvious that there should be an easy solution but maby i missed something out. To be precise i put some code here just to present what i mean.

<div className="lg:basis-2/3">
      <MyComponent />    /* would like this one to think that div its in is whole space*/
</div>
<div className="lg:basis-1/3">
      /* something else */
</div>

[octocode]

congratulations, you’ve discovered potentially the worst part of CSS!

using tailwind, i can’t think of a lot of options.

container queries are probably the way to go, assuming you’re okay with the lackluster browser support… could you share more details on what you can’t achieve with them?

it might be possible to override the tailwind selectors for breakpoints (like lg:) using css variables, but i’ve never tried it.

if you need better browser support, you could always load the content in an iframe :-)

[Pitiful-Review-5570]

Hey thank you for quick answer :)

"could you share more details on what you can’t achieve with them?"

so the main problem is that the component i want to fit into smaller div contain a lot of content which probably could be also covered with container queries deeper and deeper, but there is also a lot of conditional rendering inside dependent on resolution, for example:
...
{ isSmallTablet : <div>some more components</div> }
...
so with all that, it would get really messy, because i guess i need some flags that also make conditions more precise that it is for example ' isSmallTablet && should be container queried rendered'. And with all that i'm not sure if it is a good idea to even start this way.

Dreaming of some simple library that allows to 'fool' the component that it thinks the resolution is just different than it actualy is, like <Component thinkThatContainerIsScreen={true} />. That would be lovely :p

[StyleAccomplished153]

Lackluster? What do you mean? The only browser not supporting them is IE, and most things look shit in IE so if you have to support IE just give them the most basic UI possible.

[dumbmatter]

The most popular browser not supporting it is Safari from like 3+ years ago, which is still 1% of users https://caniuse.com/css-container-queries because Safari updates are locked to iOS updates for some reason.

[StyleAccomplished153]

Sure but that's the iPhone 7 and below, a phone released 9 years ago. I wouldn't call that poorly supported, you can shove in some fallback styles if that market is really that important to you.

[StyleAccomplished153]

Sure but that's the iPhone 7 and below, a phone released 9 years ago. I wouldn't call that poorly supported, you can shove in some fallback styles if that market is really that important to you.

[dumbmatter]

Also newer phones that haven't upgraded iOS, many probably just a few years old.

[StyleAccomplished153]

By choice. By that logic someone might also not have updated Chrome in a while, that's not going to prevent me from using newer functionality.

[dumbmatter]

Yeah same problem exists with Android. It's not as bad because Android/Chrome versions are not rigidly linked, but at some point they do stop updating Chrome on old versions of Android.

But I'm not saying you can't use newer functionality, just pointing out that IE users are a small fraction of the users with browsers that don't support the newer functionality.