Some important errors (CSS - HTML) included in the last PRO update

[marcor]

Hi all,
I have some errors in my websites from the last theme update:

1. Some CSS inlcuded in the theme has errors:

When you use a retina version of an image, the half size return an error:

Any idea?

URL: https://inoleggio.it

[marcor]

Ok the first error is due to that:

The theme is not adding “px” to the css.

[marcor]

The second error is due to a 577px image:

Using the retina size:

In the back end the width change to 289 but in the code is using 288.5 (the real size/2). Don’t you need to use “” for width and height?

[ruenel]

Hello @marcor,

Thanks for writing in! Initially, the unit is set to null which is why nothing displays. You will have to select the unit first then you insert a value or you can insert the value and must select which unit to use to prevent such issues. With regards to the image, it is best that you upload even dimensions because, with an odd number, the outcome could give decimal values.

Best Regards.

[marcor]

Regarding this:

You will have to select the unit first then you insert a value or you can insert the value and must select which unit to use to prevent such issues.

The unit was set to px and working before the update. You updated the theme and broke this.

Regarding this:
With regards to the image, it is best that you upload even dimensions because, with an odd number, the outcome could give decimal values.

This issue is already new from the version 4, so what I have to do? Change 124180431471 images in 230493419 sites now because you changed this?

Sorry Ruenel, both answers are not expected from a theme suitable for web agencies as you meant to be.

[marcor]

This is also another error appeared from the version 4:

e12467-1.x-bar {height:auto;padding:2em 7vw 4em 7vw;border-radius:!0px 0px 0px 0px;font-size:16px;background-color:#042759;z-index:10;transition-timing-function:cubic-bezier(0.400,0.000,0.200,1.000);}.e12467-8.x-bar {height:auto;padding:1em 0em 2em 0em;border-radius:!0px 0px 0px 0px;font-size:16px;

A strange ! before the value of the border radius no one touched, just in case you want to check.

[ruenel]

Hey @Marcor,

I have added this to our issue tracker so that the developers can be made aware of this. They should be able to investigate this thoroughly.

With regards to the images, since the images were already uploaded, please understand that the Retina option works by displaying the full image with the full dimensions or with half of the image dimensions. Though the validator may have tag it as an error while most browsers do not and will have to render the value. For example, with Chrome browser, the 150.5px or 150.6px will just be rendered as 150pixels. The value will just be rounded up when using pixel units. Other browsers display 151 pixels instead.

By the way, Pro 4.1.5 is now available in automatic updates! This release contains fixes for several issues, like you have mentioned above, so be sure to check out the changelog (https://theme.co/docs/changelog/pro-4). Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Thanks for your understanding.

[marcor]

Hi Ruenel,
The new version don’t fix any of the issues (like this one or the image error on schema reviews, other thread).

Regarding the image, I’m sure it will be rendered good. But the source code has the decimal value, so it’s flagged as Bad value for attribute height on element [ img ] as it is.

Three points why you need to fix that error:

1. It’s a new error, not happened in V3 and oldest, so you broke something (we can’t go backward);
2. You can’t ask to upload only pair-pixeled images or reload all the website images;
3. We can’t work with invalid html, despite is rendered well on browser.

Many thanks for your understanding.

[alexander]

Hi @marcor,

As Ruenel mentioned, we’re looking into this.

I have added this to our issue tracker so that the developers can be made aware of this. They should be able to investigate this thoroughly.

We’ve identified the 2 CSS errors from your first post. Meanwhile, if you change those two Mobile Button settings and save Theme Options the px units will start outputting immediately. In the next release they will be coerced to use px when a numeric value is found (even without having to save Theme Options).

I’ve tried reproducing the retina issues you’re having (with the Image element) but it’s always output the attributes inside of quotes on my end. Can you let me know what element you’re using, or where in the theme you’re seeing this? Thanks!

@ionrane, I’ve removed your comment as it isn’t constructive to this support request. I see you have your own thread open (and your comment here was mostly copy/paste from that one). We’ll followup on your thread: PRO won't SAVE ANY change to some pre-existing pages, Pro conflict with Redirection Plugin, Pro Creates CSS Bugs, UI suggestions

[marcor]

Hi Alexander,
Thanks for your answer. Regarding the mobile button, I’m glad you found the issue.

Regarding the retina image, you need to force the retina version to be an integer, to pass the html validator. In past releases of the Pro theme we didn’t see this error even when the dimension of the image was an odd number of pixels.

Edit: From V4 i also have the error mentioned by @ionrane (an unexpected ! in the border radius code). You can pass my web throught any validator to see:

“I found additional errors in the HTML they generate (namely, you CANNOT have a zero border-radius. You MUST leave border-radius ON, AND set all sides to something greater than 0. Else it writes out invalid CSS ( border-radius: !0px; or border-radius: !0, 0px, 0px, 0px ).”

Many thanks for your support.

[ruenel]

Hello @marcor,

You are most welcome. @Alexander has been looking into this issue. A release update shall be rolling out anytime soon. Please watch out for it.

Thanks.