Typewrite theme not displaying properly on iOS
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.
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.
Last edited by Limonada on Fri Dec 27, 2019 12:19 pm, edited 1 time in total.
Hi,
I don't have an iPad to test it but from Safari and in iPad mode is ok.
I don't have an iPad to test it but from Safari and in iPad mode is ok.
Have you tried from another browser in the iPad ?
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?
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?
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.
and also this:
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?
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;
}
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;
}
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?