Hi Rakesh,
You should try using CSS Grid Layout for this kind of need. Look for it on CSS Tricks.

Hello Miloš,
I can’t really answer for sure without an extract of your code, because even HTML could impact the behavior here. Indeed, if you didn’t put width and height attribute on the image, the rendering could vary.
Important note as well: I didn’t put much effort in the image ratio, you might need to tweak the CSS a little bit if the first HTML solution doesn’t work.
Have fun :)

Hello Rita,
Sorry that you still have to support IE10 and IE11. I would say that it is a corporation decision not a CSS decision here, but I won’t risk myself on that path.
You can use @supports to use the solution I propose and override a solution for IE based on floating elements. We used to adopt a technique for responsive emails with floating tables, it should work for any kind of element. Another solution is to rely on JavaScript to define a precise behavior based on the component parent.

Unfortunately there is no magic solution when you try to answer modern issues with old and unsecure tools.

I have built media-query-less cards and pages, but it does me no good if it won’t work for half of the people I’m trying to reach.

It’s certainly no picnic having to produce the css to work for both and I’m still in the process of trying to get it to work.

Hello Bobby,
Thanks for your concern on accessibility! I agree the vw shouldn’t be used as is.
That’s why I used a clamp() function to make it more flexible and “zoom-friendly”. I wasn’t sure, but with both max and min at a em unit, the font is made compatible with user font-size settings. Just tested it on Chrome and Firefox with text-zoom and interface-zoom. All good

Scalable typography is commonly done with the viewport width (vw) unit, based on the viewport

…and NOT accessible. It’s not based on the user’s browsers text size, or any other custom settings. Please avoid using it.

Hello Chris :)
Thanks for the feedback!

I can’t be more agree here Sam

Your are very welcome