Typewrite theme not displaying properly on iOS

Post Reply
Limonada
Jr. Bludit
Posts: 4
Joined: Sun Oct 20, 2019 2:37 pm

Sun Oct 20, 2019 2:53 pm

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:
Image

This is the screenshot from ipad:
Image
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:
Image


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.
User avatar
diego
Site Admin
Posts: 721
Joined: Sat May 16, 2015 2:53 pm
Contact:

Mon Oct 21, 2019 7:53 pm

Hi,
I don't have an iPad to test it but from Safari and in iPad mode is ok.
Image
User avatar
diego
Site Admin
Posts: 721
Joined: Sat May 16, 2015 2:53 pm
Contact:

Mon Oct 21, 2019 7:53 pm

Have you tried from another browser in the iPad ?
Limonada
Jr. Bludit
Posts: 4
Joined: Sun Oct 20, 2019 2:37 pm

Thu Oct 24, 2019 9:51 pm

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!

Image

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?
Limonada
Jr. Bludit
Posts: 4
Joined: Sun Oct 20, 2019 2:37 pm

Sat Dec 28, 2019 4:22 pm

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?
Post Reply