Mobile theme optimization

Posted in: Newspaper
Post count: 70

Hi there!

I’m here cause i noticed a little bug on the mobile version of Newspaper. When you load the homepage or an article, before that the browser loaded the full HTML/CSS, there is a blue color on the page that cover the content, exactly the color of menu’s background. Is there a way to fix this, i don’t really like that.

Screenshot link: http://i.imgur.com/HK21fPV.png

Thanks in advance

Post count: 70

P.S: Is it Newspaper 8 compatible with WordPress 4.8?

My website: http://gamesquare.it/

  • This reply was modified 9 years by Fenix.
Post count: 623

Hello @kley,

It only comes when you use both mobile theme and speed booster plugin together.
You can either deactivate mobile theme or speed booster.

Thank you for your understanding.

Post count: 70

But i want both active 😀
Is there a way to fix it without disabling anything? And Newspaper 8 is compatible with WP 4.8?

Thanks

Post count: 23312

Hello Kley,

I have inspected your website and I saw that on mobile mode, you bring some transitions when you navigate on your website. So, please notice that issues may also come from your other customizations, not just the speed booster plugin. This has been tested with the theme and should work as expected, without any problems. Try to do a new fresh install for another sub-domain and use only the speed booster and check the results.

Thanks for your understanding!

Post count: 70

I didn’t make any customization of the mobile theme, i’ve only used the personalization option available in the theme options.
Anyway, I’ve execute the test on my test website and it seems to work fine. This is very strange because I’ve imported the same settings and customization (speed booster included) of the main site.
The question is “Why?”.

Post count: 70

Here is a new screenshot: https://i.imgur.com/mKuB407.jpg
This background color appear even in my test website, its a sort of menu background (this menu: https://i.imgur.com/XZOKx6G.jpg) that cover the content for less than 1 sec and then slide off on the left side.

  • This reply was modified 9 years by Fenix. Reason: Edited
Post count: 23312

Hello Kley,

If you move CSS to the footer, all of the styles will be loaded later and you will see each CSS re-write. In order to avoid this, you need coding knowledge and place your CSS styles directly in style.css and there is no way of adding it automatically. Alternatively, you can use speed booster and simply remove style.css from its files so it will not get moved at all but you still move other render blocks. As a hint, you can comment the line which moves the theme style to the footer from here -> https://www.screencast.com/t/QSGiwVyg6C

Hope this helps!

Thank you!

Post count: 76

Hi Kley,

I have problem aslo with mobile template and find better solution with this plugin : AMP for wordpress .

You can redirect all mobile connexion to amp with this plugin, then you don’t need other mobile template.

Post count: 70

@Catalin: So i’ve to remove almost all the style.css that my site uses to obtain an unique and more optimized css loading or remove style.css from the moved css files by speed booster. Anyway, i’ll try it on my test website which is the best way.


@Pierreto
: I tried AMP and it doesn’t work correctly. Also, it is not officially supported by the template creators. My website have a very good optimization (https://gtmetrix.com/reports/gamesquare.it/8wMcYwjS – More than 90/100 in Mobile and Desktop score of Google Pagespeed and A-A-A-A-B on WebPageTest), so i don’t want ruin that by using an unsupported plugin.

  • This reply was modified 9 years by Fenix.
Post count: 623

Hello @kley

To use both, replace style.css in newspaper/mobile/style.css with the following. Now you can use both the plugins and there will be no flash.

https://www.dropbox.com/s/pa8ubmt04ctqyag/style.css?dl=0

Thank you for your understanding.

Post count: 70

@Amit but this file is completly different from the original: https://www.diffchecker.com/fy9yW5tQ

Post count: 623

The CSS I have provided is for version 8.0 mobile theme.
Its copy of original CSS (comes with the package) with some minor changes.
Using that CSS will definitely solve this >> https://i.imgur.com/mKuB407.jpg problem

Post count: 14

@Amit could you be so kind as to upload the modified style.css somewhere else as dropbox has hit the daily view limit?

Post count: 623

Hello @mrmad

Here is new link: https://goo.gl/Uf8UHl

Post count: 14

@Amit
Thank you very much. Just a little a question. If I want to include this in my child theme, I need to create a new folder with the (mobile) style.css inside?

Post count: 623

@mrmad

Yes.
path must be child-theme/mobile/style.css

Post count: 70

The problem is that it may be a temporary fix, because when tagDiv will change something of the css it will not work anymore.
I would prefer to use a permanent fix.
Thank you anyway.

Post count: 70

I’ve tried to remove the mobile style.css from the speedbooster, but it doesn’t work. The custom css that Amit has proposed to remove it works great. But its a momentaneous solution that works until you will change the file.
So, is it possible to remove it forever? I’m asking this because that effect is bad for who have a slow internet connection, the reason is that when you are loading an article you can’t see the content (text) until the css is completely loaded or the animation ends.
Right now I’m trying to delete all the Newspaper files and upload them again to see if something changes.

Update: After that i’ve uploaded again all the files of Newspaper theme the problem is still there. I’ve also deleted my custom css in both sides, desktop and mobile, and removed my personalizzation from mobile theme colors but nothing changed. My child style.css is empty and i don’t have applied any customization to the originals css files. I’m not using a cache plugin and i’ve deactivated all the unnecessary plugins to see if there’s some of them that interfer with the theme’s functions. After that i removed my custom body css class to see if was that to cause the problem, but again the issue was still there.
Maybe in the demo you customized something that block this damned animation?

  • This reply was modified 9 years by Fenix. Reason: Update
Post count: 70

At this moment i’m using the CSS code that Amit has posted but i would be glad if someone have a way to fix it without customizing the original css file.

Viewing 20 posts - 1 through 20 (of 20 total)
You must be logged in to reply to this topic.