Return to previous page

Differences in Theme display between Android and IOS devices

This topic has 4 replies, 2 voices, and was last updated 8 months, 1 weeks ago ago by Luca Rossi

LVRB

Participant

June 11, 2024 at 07:36

Hello!

Performing visual tests of the theme on different mobile devices, several differences are seen on Android and IOS.

Animation effects and fonts, element distribution, etc.

How can I solve this problem and make both devices (android and IOS) look exactly the same for both?

I attach screenshots with the differences.

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#399178 Copied Theme version: 9.3.11

3 Answers
Luca Rossi

Support staff

June 12, 2024 at 06:47
Hi @LVRB Love’s Rebel,

Please make sure the ‘arial black’ font is loading correctly. How did you import this font?

To fix the menu position on mobile, please try adding the following CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

.et-mobile-panel .et-content_toggle .et-content .menu-main-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

Hope it helps!
#399367 Copied
LVRB

Participant

June 12, 2024 at 16:18

Hello!

The CSS worked for the menu but the header was too high. Could you help me with a code so I can move the header position as well? screenshot attached.

Regarding the font used in the “marquee” effect, it is a font that is within the system (Arial) and with HTML I modified it to Arial Black, but even if I do not use HTML it does not work for IOS devices. I also attach screenshots.

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#399476 Copied
Luca Rossi

Support staff

June 13, 2024 at 10:33
Hi @LVRB Love’s Rebel,

For the header, please also add this custom CSS:

.et-mobile-panel .et-mini-content-head.et-inline-type { margin-top: 100px; }

For the fonts, you’ve changed to the system font: Arial Black which it’s not existed in iPhone. It’s working on computers/laptop only. Please use the Google Fonts instead.

Best Regards,
The 8Theme Team!
#399581 Copied
Tagged: android ios theme discrepancies, android vs ios theme differences, display differences android ios, theme display variations woocommerce, woocommerce themes android ios, wordpress woocommerce themes comparison
Viewing 4 results - 1 through 4 (of 4 total)