Modifying breakpoints

Hello @cmerrick,

Thanks for writing to us.

We the current update we have the viewports showing on the editor view as shown here:https://share.bsf.io/2Nu72nEY?method=GET.

Hope this helps.

Regards.
Judith.

Hi Judith, thanks for writing back but what I mean is can I change the pixel values of the breakpoints? They default to something like tablet view at 976px and mobile at 767 (roughly). What I want to do is change the tablet breakpoint to, say, 1140px. I interpreted “Ability to modify breakpoints” as being able to do this, but I can’t find anyplace in the interface for it.

Thanks!

Hello @cmerrick,

Thanks for clarifying.

You just need to add 2 lines of code in the wp-config.php file.
define( ‘UAGB_TABLET_BREAKPOINT’, ‘800’ );
define( ‘UAGB_MOBILE_BREAKPOINT’, ‘500’ );

Regards.
Judith.

Cool, thanks for the info!

It took a while to get back to this but I tried adding this code to wp-config.php and it didn’t seem to do anything. I changed the numerical values, and tried clearing my cache before reloading the site, but there was just no effect at all.

Also it’s kind of weird that this has to go in wp-config.php instead of being able to put something in functions.php, but for now I’d settle for just getting it to work.

Any thoughts on what’s wrong?
Thanks!

Hello @cmerrick,

Thanks for your patience thus far.

Add the code in a wp-config.php file as shown here -https://share.getcloudapp.com/GGuz5DX4

Drag and drop any block and add a different setting on different devices, Publish the page and view it on a mobile or tablet. You will see a breakpoint for dynamic CSS. This is as shown in this screencast: https://share.getcloudapp.com/xQuxEyp4

Hope this helps.
Please let us know how this goes.

Hi, thanks for the follow up! Just to clarify: does this mean the new breakpoints will only apply to blocks I modify after adding the code to wp-config? I have already tried adding it and doing a hard refresh on pages with previously existing blocks and it didn’t seem to do anything, so I’m wondering if it only affects blocks that are created or at least modified after updating wp-config.

After more experimentation… I have no idea what’s going on. It’s now working if I resave the page, which it didn’t before, and I don’t know what’s different. So I guess you can use this code, but I still think it’s weird and unstable to have to put this in wp-config instead of in a theme file.

• This reply was modified 2 years ago by cmerrick.

Hello @cmerrick,

Thanks for writing back.

It may have been a cache issue that’s why the code wasn’t taking effect. I am glad it now works for you.

We will work on improving the breakpoints implementation, in the meantime please apply the code.

Please let us know whether you have any other queries.

New info: I’ve updated wp-config so tablet breakpoint is 1280 and mobile is 900. I think part of my confusion is that this only seems to affect SOME of the Spectra settings. For example, I have a container that I’ve set to flex-wrap:nowrap at desktop size, and changes to flex-wrap: wrap at mobile size. This creates the desired outcome: at or below 900px wide, the blocks inside the container stack instead of lining up in a single row.

However, inside that same container I’ve set one of the inner blocks to “Hide on mobile”, but this only takes effect at 767px. So while the container wraps at 900px, it continues showing the block I’m trying to hide down to 767px.

It appears that the external stylesheet, uag-css-longnumber.css is picking up the custom breakpoints, but the plugin is ALSO writing styles directly into the header inside this tag:
<style id=”uagb-style-conditional-extension”>some css here</style>
and THAT is not picking up the new breakpoints, it’s still using 1024 and 767.

This seems to specifically affect the visibility settings.

Is there any fix for that in-page style so it’s consistent with the external stylesheet?

Thanks again.