Mobile/iphone6 issue with menu and visualization

[marcelloc]

Hi 
I have a series of problems with the mobile version of my blog (www.marcellocaraci.com) if I try to view it via iphone 6.

1. I configured the site identity with an image, a site title and a title tagline: in mobile view I see all messed up with respect to classic browser/desktop view
2. The character chosen is not displayed correctly for site title (you can see the difference between desktop and mobile) 
3. The primary menu doesn’t work
4. The google ad overlaps the title/logo area
5. Even if the “overlap title/logo to header image” in mobile view I see these (title and logo) overlapped with ad
6. the background image is not displayed rightly (I’d like to see the same as the desktop view)

Can you help me in some way? I didn’t see any solution after a research.
I have cloudflare and W3 total cache installed: is it possible that problems are linked to the wrong settings at the beginning? did a wrong configuration with minify choosing both w3tc and cloudflare minification but now I disabled the cloudflare minification and configured the W3tc only.

[Weaver]

In general, post processing minification is both unnecessary, and tends to break themes. The problem seems to be that post processing minifiers can’t minifiy already minified files correctly. And in fact, looking at the HTML output of your site, I can see that something terrible has happened to Weaver’s JavaScript files that would almost guarantee they don’t work correctly.

I can’t even tell which version of Weaver Xtreme you are using. The code is just too mangled to find out anything.

But watching the site behavior, it seems that the problem goes back to using the WP custom logo which is not styled to behave responsively by default, and will thus cause all sort of issues on mobile devices. This may be a problem or a feature with Weaver Xtreme’s support for that option, and we will look into it. But we can’t really give much specific help when your site is all mangled up by minifiers.

[scrambler]

A) Regarding your issues 1 to 5 they all relate to the problem below

When you use move Title/tagline over header image, they float above the header image, so as the header image gets smaller on mobile you can end up with A couple of issues.

1- The Title get split on two lines,  you can prevent that by adding the rule below in Main options > Fonts & Custom > Custom CSS rule box (or Global Custom CSS Rule box in the customizer)

#site-title {max-width:85%;}

2- There is also a small issue with the Custom logo which is not vertically positionned like the title.
@weaver this case shows a potential problem with the way the Custom logo is positionned vertically

The Title and Tagline are positionned with margin-top:4% !important, so as the image scales down, the title moves up to maximize positionning.

But the Custom Logo is positionned with margin-top:3.2em which does not change when the image scales down.
As a result, the Image logo and the Title do not move together.
May be the custom logo should use the same type of positionning as the title (%)

@marcelloc In the mean time, this is the Custom CSS you could put in the Global Custom CSS Rule box to improve things

#header .custom-logo-link {margin-top:4%;}

3- The tagline gets split over two lines

To give as much space horizontally to the title and tagline, add the rule below to move the logo left on phones

.is-phone #header .custom-logo-link {margin-left:2%;margin-right:1%;}

If the Tagline still gets on two lines, we can add more rule to make it smaller, or you can set it to be hidden on phones.

B ) For your issue number 6, I do not understand what you mean, so you need to elaborate.

But if you want the background image to scale with the browser, you can add the rule below

body.custom-background {background-size:cover;}

[Weaver]

The margin on the custom logo has been changed for V3 and uses %. 

[marcelloc]

Hi
You’re both fantastic!
I love your theme and it’s flexibility and also love your exhaustive and prompt support/responses.
@weaver: I suspected that the problem was, in some extent, linked to minification: infact I was studying the topic since days. The real issue, here, is the obsession for google analytics results…
I’ll keep it in mind for the future.
@scrambler all your advises are very clear to help me tu understand my visualization issues.
Regarding the tagline I set 100% the max width and flagged the option “Hide on phone” since I was unable to resize the font size so to have a siongle row ion mobile portrait view.
The logo is quite big and doesn’t resize in the mobile view so it’s impossible to have the tagline in one row, even with extra small fonts.
To have a better mobile aspect I set:.is-phone #header .custom-logo-link {max-width:10%} in the custom css/Header area.
No success in setting the tagline in only one row and in setting the font family as in the desktop view.
Regarding the incorrect background image visualization in mobile I make an attempt adding the rule you wrote and this solved the problem. I’m not english mother tongue so I understand that sometimes my explanation could be not so clear. 
The only issue that remains is the not functioning link to pages in the primary menu in the portrait visualization for the mobile view: in the landscape position it works.
Again many thanks: I hope, in the near future to get more and more satisfaction from your job.
The theme is really impressive and I only regret not having, at the time, the possibility to buy the pro version to give you a tangible appreciation: I started to work to my blog using wordpress only on july (in my past, 2001 experience, I was a backend developer but I’m a totally newbie in the frontend/web field) so apologize me if my question was silly and naive.

[scrambler]

OK, so something is seriously messing up your site, because the mobile classes (like is-phone) are not being applied.

As a result, none of the rule I gave you using .is-phone work.

This is likely due to either a plugin or a cache problem.

To be able to visualize if the class work again, add the rule below in the Global Custom CSS Rule box, which should turn the title read when the browser is reduced to phone size. 

.is-phone #site-title a {color:red !important;}

Then test reducing your browser down to a narrow size on your desktop. If the Title never turns red, then it means the is-phone class is not being added and something is still broken.

You can also open your browser developer tool, look at the body tag, and check is the class  is-desktop  changes to is-smalltablet and then is-phone as you reduce your browser size.

To find the culprit, start by deactivating ALL non weaver plugins, including caches, and see if the problem disapear. If it does, reactivate one by one testing in between until the problem comes back to identify the culprit.

Unrelated to this issue, I also noticed a bad rule

@mediamin-width768px {
.menu-primary .wvrx-menu a {
padding-top:.6em;
padding-bottom:.6em;
}

.menu-secondary .wvrx-menu a {
padding-top:0;
padding-bottom:0;
}

.menu-secondary .menu-arrows .toggle-submenu:after {
top:.5em;
}

.menu-primary .wvrx-menu,.menu-primary .wvrx-menu-container,.menu-secondary .wvrx-menu,.menu-secondary .wvrx-menu-container,.menu-extra .wvrx-menu,.menu-extra .wvrx-menu-container {
text-align:left;
}
}

The @media opening is wrong, it should be
@media (min-width768px) {

I am wondering if this is a rule you added. If not we will have to work on that next.
make sure you are not using any minify plugins, as all Weaver CSS is already minified and you should no re minify  with a plugin

[marcelloc]

Hi scrambler: today I’ll try to make the testing you’r talking about (honestly I don’t know if I’ll be able to do it since some urgent activities I have to make).
I never added that rule (@media). My first and biggest mistake was to use minify: I never imagined that this is unuseful and not needed. Unfortunately I didn’t know that weaver CSS is already minified: my fault.
I’ll give you results once I’ll perform the above steps.
Again many thanks for your kind and quick reply.

[marcelloc]

.Hi scrambler

the .is-phone #site-title a {color:red !important;} works: reducing the browser view it become red.

I’m sure it’s all related to the caching and minifying process performed by the couple Cloudflare/W3 Total cache.

Now I’m working in order to revert back to the origianl configuration (no cache no minify) after that I’ll re-set the cache but, tihis time, I’ll totally avoid minify either from Cloudflare and W3Total Cache.

Meanwhile I’m waiting for your indication to amend the The @media opening.

Again thank you very much: you have a paid coffe and a “cannolo siciliano” when you pass in Italy :smiley: 

[scrambler]

I don’t see the bad @media rule anymore, it was probably the result of the extra minify plugin

[Author]

Posts