[Resolved] @container query

[Author]

Posts

[davidm-13]

Hi have the following @container query which isn't working and I don't understand why, also according to the red highlight in container-css.JPG the syntax is incorrect.
Any help much appreciated

[Minesh]

Hello. Thank you for contacting the Toolset support.

What if you try to use the following:

@container (inline-size > 450px) {
  /// addd your code here
}

More info:
- https://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen

[davidm-13]

Hi Minesh,
Thanks for this, tried your suggestion, and checked out the link, but the problem(s) remain the same

[Minesh]

This is custom CSS. Can you please try to get in touch with CSS pro and check with them where the issue is and does it from Toolset or something else?

[davidm-13]

Hi Minesh,
I checked here - hidden link - seems to have over 90% support.
So don't understand why it's "custom css".
Maybe you can check if it's compatible with Toolset.

Thanks

[Minesh]

Can you please share problem URL where you are trying to apply the said container CSS and where you added it.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

It seems you will have to refactor the CSS code you added per your required device.

Please check the following link and see the breakpoints available for desktop, laptop and tablets and add your CSS breakpoint accordingly.
- https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

You should put all those CSS you added into the media query rules/breakpoints that targets tablets and desktops but not mobile.

More info:
- hidden link
- hidden link

This design needs refactoring of CSS based on what device you want to target. I suggest you should consult CSS pro and check with them and they should guide you want will be the best and minimum effort task to achieve what you need.

[davidm-13]

Hi Minesh,
Thanks for the advice, refactored the css.
The @container query is still not working. Hope you can check it now.
I also changed the default layout to mobile portrait, and put "@container (min-width: > 900px;) { }" to change design to mobile first. Don't know if this is correct practice, let me know.

Thanks

[Minesh]

On the following page - there is a section "container query demo":
- https://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen

I've tried to apply the same demo on the content template for test and I found that is working as expected. You should try to appy "Full demo:" available with above link and check and see how it works. So add all related CSS and HTML for that "Full demo:".

You should go ahead and follow that demo and accordingly adjust the CSS you added for your elements.

[davidm-13]

Hi Minesh,
Thanks for the link, much appreciated.
I copy / pasted the container query demo and it works as expected. Don't understand why "container-type: inline-size" is red indicating an error
Thanks

[Minesh]

I'm not sure. I would also like to update you that this concept for container query is new and Toolset may or may not be fully compatible or you will have to make compatible as required.

That is why I asked you to check with CSS pro as we can do really little here.

[davidm-13]

Hi Minesh,
Thanks for the update.
Good you didn't tell me this in the beginning 'cause I would have given up long ago. I assumed it was my ignorance and have been battling on for the past few days. Happy to inform you it was my ignorance and Toolset seems to be compatible with container queries, although there are a few bugs that need to e sorted such as class names -within the container query {...}- appear in red indicating an error.
Thanks for your advice, really learning alot

[Minesh]

I'm not sure why the class names appears in red color within the container query. As already shared we can not do much here and if you have a solution, you are welcome to share that will help other users.