we are running our new project https://webet.de on Powermag and ran into a couple of layout problems. Hope you can help.
1) On iPhone (not on Android devices and also not on chrome iPhone emulation) there is a problem with the headings. The font size is bigger than expected and also the space between the single characters is weird. I attached a screenshot from Android (how it should look like) and iPhone 6 (broken).
2) While all the other content is rezsing correctly on mobile devices, the header logo is not responsive. This leads to a corrupted view on small displays (like iPhone 5), where the content section is smaller than it is supposed to be. See Screenshot webet_iphone5_logo
3) There seems to be a problem with retina images. In the Google Chrome console, there are a lot of errors that refer to retina.min.js and say the 2x versions are on a 404 - any idea whats wrong here? See Screenshot webet_retina404
1. After a while digging it turns out to be a Safari bug related to a specific rule. Pasting this in the custom CSS textarea should fix the weird letter-spacing problem:
h1, h2, h3, h4, h5, h6 {
text-rendering: auto;
}
2. That is happening as you added the .demologo rules with specific width and height, which overrides the max-width:100% rule for mobile devices.
3. The option is meant to serve retina images (essentially for the same file name plus @2x at the end ) when they are available. Is up to the user to make them available uploading a double resolution version for each image though, otherwise it will return a not found message. I suggest to keep the option disable and rely to some third party plugin which might do this automatically if/whenever possible.
I'm aware this is not very clear, will probably add a notice or remove the option entirely.
Hi there,
we are running our new project https://webet.de on Powermag and ran into a couple of layout problems. Hope you can help.
1) On iPhone (not on Android devices and also not on chrome iPhone emulation) there is a problem with the headings. The font size is bigger than expected and also the space between the single characters is weird. I attached a screenshot from Android (how it should look like) and iPhone 6 (broken).
2) While all the other content is rezsing correctly on mobile devices, the header logo is not responsive. This leads to a corrupted view on small displays (like iPhone 5), where the content section is smaller than it is supposed to be. See Screenshot webet_iphone5_logo
3) There seems to be a problem with retina images. In the Google Chrome console, there are a lot of errors that refer to retina.min.js and say the 2x versions are on a 404 - any idea whats wrong here? See Screenshot webet_retina404
Thanks for your help and best regards
Carsten
Hi there,
1. After a while digging it turns out to be a Safari bug related to a specific rule. Pasting this in the custom CSS textarea should fix the weird letter-spacing problem:
h1, h2, h3, h4, h5, h6 { text-rendering: auto; }2. That is happening as you added the .demologo rules with specific width and height, which overrides the max-width:100% rule for mobile devices.
Try by changing this CSS snippet :
.demologo { display: block; width: 350px; height: 129px; }to
.demologo { display: block; max-width: 350px; max-height: 129px; }3. The option is meant to serve retina images (essentially for the same file name plus @2x at the end ) when they are available. Is up to the user to make them available uploading a double resolution version for each image though, otherwise it will return a not found message. I suggest to keep the option disable and rely to some third party plugin which might do this automatically if/whenever possible.
I'm aware this is not very clear, will probably add a notice or remove the option entirely.
Hope it helps
Regards
djwd