Changelog: Nulled X | The Theme Version 5.1.0

Changelog Details

X is back with a new trick up its sleeve—responsive typography! The implementation currently available in the theme serves as a groundwork for future, more granular controls and is intended to be more foundational for the time being.

When visiting the Typography options in Theme Options, you will find a new Root Font Size section. Using these options, you are now able to specify a root font size for your website at each breakpoint. These new root font sizes are applied to the element, which affords much more flexibility in two main ways:

You now have the option of utilizing a larger root font size for desktops and having it transition down for smaller screens. This works great in a responsive context as it helps to ensure that your fonts do not get too cramped on small devices.
You can now take full advantage of CSS rem units. rem units differ from em units in that they will always be set relative to the font-size of the document’s “root” element (in the case of HTML, this would be our element). This opens up new worlds of styling flexibility and functionality that em units do not always afford.

Choose Your Path Forward

There are two methods of responsive typography you can choose from in the theme options—stepped or scaling—which differ slightly, but ultimately work to achieve the same result:

Stepped – Specifies a root font size at each breakpoint, which changes as soon as that breakpoint is triggered.
Scaling – Specifies a minimum and maximum root font size to be updated over a viewport range. For example, you may choose to have your min and max font sizes as 12px and 18px respectively, which should scale between screens 1000px and 500px. What this means is that any screen over 1000px will always see 18px as the root font size, and any screen under 500px will always see 12px as the root font size, whereas everything in between is scaled linearly over that distance. Check out this article if you’re curious about a more detailed explaination of the technique this is based on.

Please note: the scaling technique is slightly more “experimental” than the stepped approach as it involves utilizing calc() and viewport units to dynamically size content, which does not always work properly in some browsers (most notably Safari on macOS as of the time of writing this article), but it does work in most modern browsers and should once all vendors implement the CSS spec properly. In browsers that don’t fully support this method at this time, your font sizes will fallback to the minimum or maximum value, depending on how big the user’s screen is. If you need a bulletproof method that works across all browsers, use the stepped mode. However, if you’re interested in a more cutting edge approach and your website’s visitor data is made up of more modern browsers, you may want to give the scaling approach a try.

For each mode, you can also choose between using px or em as your root font size unit. Whichever you choose is a matter of preference; however, if you’re slightly uncertain of how em units may work in this context, we recommend sticking with px. Using em means specifying your font sizes relatively to the browser’s default stylesheet (typically 16px), so you will be working in multiples of that size. Also, with the scaling mode, your font sizes and range limits are all set in the same unit value, so if you’re using em, keep in mind that your rangers are set using em breakpoints as well.
Wrapping Up Responsive Typography

Here are a few items going over various other tweaks to options in the theme as well as nice bits of information to know about the integration:

Body Font Size is no longer an option under Typography, as these new responsive typography features take their place. Upon updating the theme, your previous Body Font Size value will be ported over to the root font size settings (e.g. if your setting was 14px, you will see 14px as the base unit for all root font size settings).
The Content Font Size option now uses rem units to ensure cohesion with these new features. Your Content Font Size value will be updated along with updating the theme (e.g. if your Body Font Size was 14px and your Content Font Size was 16px, you will now see Content Font size as 1.143rem in your settings—remember that rem units are multipls of the root font size, so you will want to adjust this in much smaller values than you would px values).
No other typographic elements feature new options at this time. For example, headings all still maintain their same values from before, but will now be able to dymamically respond to the new root font sizes.
If you wish to “disable” this feature for whatever reason, simply set all root font size values to the same unit to effectively bypass the system and maintain things as they were previously

And last but not least, as requested by many after WooCommerce v3.0.0 was released, we’ve introduced support for their new gallery and zoom features in additon to our existing lightbox support! These features are available on your product page featured images if enabled.