Design and Adaptive Issue

[codeispoetry]

It happens on many occasion that we want to convert an HTML Code into a widget, but widget can be thrown into a full-width sidebar or a 33%, an example, sidebar.

See fro this example this Image → https://www.screencast.com/t/2XtLIMeBryf, and also see this https://www.screencast.com/t/aFtJluNO, for example

What the HTML developer has done is that he has designed HTML in such a way that he has given two different classes for the full width and the sidebar,

But this is not what I was anticipating now while converting this HTML into a widget of WordPress developer has to give a drop-down in the widget to select the class while putting them in the sidebar(33%) or a full-width sidebar.

Isn’t there any alternative that w/o declaring two classes (for full width and 33% width sidebar) we can accomplish the Objective.

P.S. → Media query won’t come into action here because they work only when device/media changes, but here we are talking about the same device/media i.e. the desktop.

[PaulOB]

Hi,

You really need ‘element queries’ for this but they aren’t likely to be a reality but you could use polyfill like these. There are others about.

Without scripting you could have limited suceess with flexbox but once again you would need to set specific limits with min and max-width which is assuming quite a lot.

If your widget items were a fixed size then you could just let them wrap to fill available space but I guess that is not the case.