CSS problem on iPhone

[Linda]

Hello,
I have problems with the website if it is viewed on an iPhone. I made the tests on testingbot.com, and also asked a friend to check on a real phisycal device – the problem was the same.
I’m using the Demo Education of Porto template: https://www.okler.net/previews/porto/10.0.0/demo-education.html

The site works fine on PC and Android devices, but on iPhone it seems like the CSS is ignored in some cases.
You can check your original demo-education html. The problem is with the texts in the hero section: on PC and Android the text with the #, the text below it and the button are visible. But on iPhone only the big # sign is visible, the texts and the button are missing.

Please help to resolve this problem, thank you!

Linda

---

[Support]

Hi, I think it may be related to the same issue reported in the other ticket.

So please try to add this:

(css/custom.css)

.custom-slider-text-block h2 {
	position: relative !important;
	z-index: 1 !important;
}

* Make sure to clear browser cache

---

[Linda]

Hi, Unfortunately nothing has changed, on iPhone these h2 text appear much bigger than they should be. Please test your demo page on an iPhone to see what happens.

---

[Linda]

Hi,
Actually the problem was caused by the .custom-slider-text-block class. When I removed it, the size became the same on all devices, and I could set media queries.

---

[Support]

Hi, you are right, there’s a problem with that css. That class sets zoom with css, try to update demo-education.css with this content:

https://pastebin.com/Mc27PXVA

Make sure to clear browser cache.

Result in a Iphone 13 pro max (safari):

---

[Author]

Posts