How to Change Breakpoints in Spectra?

This guide shows how to change the breakpoints in Spectra for better control over your site’s responsive design.

By following this simple process, you can customize these breakpoints to match your needs.

What Are Breakpoints in Spectra?

Breakpoints in Spectra define the widths at which your site switches to tablet or mobile views. These help ensure your content looks great on any screen size.

How to Change Breakpoints in Spectra?

To change the breakpoints in Spectra, you need to add a specific code snippet to your site’s wp-config.php file. You can follow these steps carefully:

1. Locate Your wp-config.php File:

This file is located in the root directory of your WordPress installation.
You can access it via your hosting control panel or an FTP client.

2. Add the Code: Copy and paste the following code into your wp-config.php file:

define( 'UAGB_TABLET_BREAKPOINT', '800' );
define( 'UAGB_MOBILE_BREAKPOINT', '500' );

Please remember the above breakpoint will work for dynamic CSS loaded for the Spectra on the frontend.

3. Save the Changes: After adding the code, save the wp-config.php file and upload it back to the server if you accessed it via FTP.

When Will These Changes Take Effect?

The new breakpoints will apply to the dynamic CSS loaded by Spectra on the frontend of your site. Make sure to clear your site’s cache to see the changes immediately.

Additional Notes

• Ensure you handle the wp-config.php file carefully. Incorrect changes to this file can break your site.
• Test your site’s responsiveness after making changes to verify the new breakpoints are working as intended.
• If you’re not comfortable editing the file yourself, consider seeking assistance from a developer or your hosting provider.

We hope this document helps you customize breakpoints in Spectra with ease.

If you have any questions or need further assistance, please leave a comment below. Your feedback is always welcome!