Safari/ responsive compatability


#1

Hello,
I noticed that Safari causes a few formatting and layout issues and there is an issue with the responsive action below a certain screen width. These issues are seen in your demo site as well as the site I’m developing.

  1. The header shrinks vertically on Safari, all open space below the header text is removed.
  2. The double underline that is centered under the section headings (services, call to action, employees, etc) is moved to the end of the text, on Safari.
  3. When the page resizes below a certain width (not sure exact dimensions), it will drop the footer. Happens on both android and iOS mobile. Did a quick check on some of your other themes (Alizee, Salon) and those respond the same)

Thank you,
Chad


#2

Hello,

Thanks for your feedback.

1&2. By any chance, are you using Safari for Windows? Those issues are happening on Safari for PC, which is no longer being mantained by Apple since two years ago. Therefore, Safari for PC does not support some of the CSS code we use for Moesia.
3. This is not a bug. The footer is hidden through a media query for small resolutions.

Vlad


#3

Yes, I was using Safari for windows, sorry about that. I’ve checked the demo site on an ipod5 and an iphone5 and on both devices it does not render correctly. It seems as if the background images are not resizing or are extremely large and pixelated and I am not seeing any of the text.

With regard to the footer, is there a way to turn it on for the smaller resolutions? It would be more usable when using widgets, i.e., placing the contact info widget along with an imbedded Google map and perhaps a contact form in the A,B and C sections.

Thank you.


#4

For the footer part, you can use a custom CSS plugin and use this code in it:


@media only screen and (max-width: 991px) {
    .footer-widget-area {
         display: block;
    }
}

Could you please post a screenshot from your iphone with the issue you’re having? I can’t really see it. Also, it would be helpful if you could post a link to your website.


#5

Thank you, I’m not much of a coder, but I’ll give it a try. My wife has the iPhone, but I’ve got a screen cap from my sons ipod. Note: The site I’m working on did the same thing on the iPhone. https://dl.dropboxusercontent.com/u/20985955/072414photo.PNG

The site I’m working: http://candjcafe.com/test/

I just started learning Wordpress and HTML this week, so I’m still figuring out how to get things to look the way I want. I ended up adding a paragraph selector to the CSS so I could maintain font consistency because I didn’t see any other place to change that in the customizer, maybe I just missed it?


#6

Thank you for the screenshot.

The image is not pixelated, that’s just an overlay image which can be turned off from the Customizer.

We are using viewport relative units for the header image (to get the full width&height effect), and I just realised that those type of units are not supported properly at the moment in iOS. I’ll try to implement a fix for this tomorrow or the day after tomorrow. Thanks again for the feedback.

I’m not sure what you mean by font consistency?


#7

You’re welcome for the screen shot and feedback. Glad to know it’s fixable.

Regarding the fonts, In the customizer there is a setting under fonts “Select your desired font for the body”, however, when I changed this I didn’t see it making any difference on the pages. In the styles.css the body selector is defined, but when using the visual editor to change the text style, the style box does not contain “body”, it only lists paragraph, address, pre, Heading 1 - 6 (see screen cap https://dl.dropboxusercontent.com/u/20985955/viusualeditor-fontsytle.jpg). I surmised that I needed to define the paragraph style in the styles.css file. Is that correct? Maybe there is a way to add the body style to the list in the visual editor or change style from body to paragraph in the customizer font section? Thanks for all your help.


#8

I see. The Body can’t and should not be in the visual editor. Changing the font for the body will affect everything on the page (not just paragraphs), except those elements that are defined separately, like the headings. That’s why we have two distinct font options for this.

I see you actually changed the font for the headings to Roboto. The thing is that you selected Roboto for the body too, which was already the default font used for the body, so there isn’t any difference to see. I just tested now and it works fine.

So no, you don’t need to add the paragraph selector in your style.css. That is already defined in bootstrap.css, but you shouldn’t change anything in that file.


#9

Thank you for clearing that up, I clearly have a lot to learn.