Page 1 of 1
Typewrite theme not displaying properly on iOS
Posted: Sun Oct 20, 2019 2:53 pm
by Limonada
Hi everyone,
I installed the typewrite theme and tried
prototyping a website here. While it is working fine and great on computer, both normal and high-dpi screens, in the ipad the navigation bar disappears: it doesn't show on top or bottom, the navbar totally disappears!!
This is how it looks in desktop:
This is the screenshot from ipad:
Screenshot taken from ipad mini 4, on Brave browser - it looks the same in Safari.
This is how it is
suposed to look on tablet:
Where should I look for the configuration to change this? Is it on the CSS code?
Anyone can help here? I guess it's related to the high resolution of the ipad, but don't know where to start.
Re: Typewrite team not displaying properly
Posted: Mon Oct 21, 2019 7:53 pm
by diego
Hi,
I don't have an iPad to test it but from Safari and in iPad mode is ok.
Re: Typewrite team not displaying properly
Posted: Mon Oct 21, 2019 7:53 pm
by diego
Have you tried from another browser in the iPad ?
Re: Typewrite team not displaying properly
Posted: Thu Oct 24, 2019 9:51 pm
by Limonada
Hi!
Thanks for the answer guys.
By the way, i also tested on android (Huawei P30 lite), and it works perfectly.
I've tried in the iPad in Safari, Brave and Chrome. They all behaved the same: No top navigation bar, nor a side bar.
To worsen the problem, I've tested this in iphone, and the problem is the same, somehow!
I've tried with a
fresh install and the latest version of typewrite and it has the same issue.
Could the issue be the high DPI of the ipad?
The ipad mini has a 2048-by-1536 resolution, but when I simulate in the desktop browser (like diego did), it resizes for 1024x768px. Could this be the issue? Or iOS itself?
Re: Typewrite theme not displaying properly on iOS
Posted: Sat Dec 28, 2019 4:22 pm
by Limonada
Hello!
After testing and removing lines on the CSS, I made some progress:
I managed to make the header visible in iOS (iphone/ipad), by changing the following code on the
main.css as stated below. I think the
top: 0 were the key issue on the
header__top.
Code: Select all
/* -------------------------------------------------------------------
* ## header logo
* ------------------------------------------------------------------- */
.header__logo a {
display: block;
display: -webkit-box; /* add for visibility on iOS */
margin: 0;
padding: 0;
outline: 0;
border: none;
transition: all 0.3s;
}
.header__logo img {
margin: 0;
}
and also this:
Code: Select all
@media screen and (max-width:1100px) {
.s-header {
width: 100%;
/*background: transparent;*/
padding: 0;
position: static;
/*top: 0;*/
bottom: auto;
}
.header__top {
z-index: 100;
background: #111111;
width: 100%;
height: 78px;
/*
Commented to enable visibility on iOS
position: fixed;
top: 0; */
left: 0;
}
.header__logo {
margin-top: 4px;
transform: translate(5%, 25%); /* --> added for iOS
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
position: absolute;
top: 0;*/
left: 0;
}
If you want to test, I've uploaded this CSS on the version here:
https://joaobotelho.pt/bludit/
These changes make the logo and the nav bar visible on iOS, but the navigation menu is still not working (despite working on android).
Any ideas?