- ApiPractical example – How to add a new Block and Module
- ApiAPI – Smart Lists – Introduction
- ApiAPI – Category top section style – Introduction
- ApiAPI – Category top section template – Introduction
- Apitd_api_module::update
- Apitd_api_module::add
- ApiAPI – Modules – Introduction
- ApiUsing the Theme API in plugins
Perfect, thank you!
Ok, I was wondering if there is a way to prompt new mobile visitors to do it for them?
Hi,
Please send me your site’s URL, I need to inspect this so I can provide you a fix.
Or try to replace the css which centers the menu and use only this one:
#td-top-menu .sf-menu {
display: table;
float: none;
margin-left: auto;
margin-right: auto;
}Should’n affect the menu on mobile: http://screencast.com/t/EOBRjXJzr4Y
Just center it on other screens: http://screencast.com/t/kTql787mh1ll
Thanks
Hi,
Add this css or just add the width: 150px !important; to the previsious custom css i gave you:
@media (max-width: 767px){
.mobile-logo-wrap img {
width: 150px !important;
}
}Should solve it http://screencast.com/t/b9dHstBboWKQ
Thanks
Hi,
That space is the title of the post, as you can see the post title is white and when displayed on mobile the post title slides under the image and because it’s white it gives the impression that a large gap is there http://screencast.com/t/4MMjlso9wG
You can fix this by changing the post title color, use this custom css for this:
@media (max-width: 767px){
.single_template_3 .td-post-header-full header .entry-title {
font-size: 28px;
line-height: 32px;
margin: 0px 0px 14px 0px;
color: inherit;
}
}Thanks
I don’t really know what you’re talking about Steven.
Yes, the site was temporary down because of a syntax error while trying add a code like this: http://triangle717.wordpress.com/2014/06/04/enabling-the-if-modified-since-header-on-wordpress-org/
but site is working after deleted code again- also from mobile and logged out. So I don’t know what’s the point here.
seem you just playing around with code and the theme and not serious about making a website for people to visit..i just find it weird that’s all
Aha, if that’s what you’re thinking…. if I wouldn’t care I wouldn’t ask the whole stuff.
Guess it’s besser to ask nothing here, I said from the beginning that I’m no professional and new to all this.
Well whatever I’m out.
@TheMediumUTM, thanks for the info. I don’t necessarily want to center the logo on mobile I just want to be able to use the logo I have set for mobile. @Lucian, I replaced the .sfmenu with your adjustment but seeing no new results. It is still being displayed behind the menu and using the desktop version of the logo.
Hi Lucian, thanks for that, the logo is within the navbar now, however, the logo is now squished a bit and looks distorted. How to prevent this?
Hi,
Thanks @TheMediumUTM, that’s right!!
@sbo
You would have to use a more specific selector, try using this id #td-top-mobile-toggle on mobile, like this:
@media (max-width: 767px) {
#td-top-mobile-toggle .sf-menu {
display: block;
float: left !important;
margin-left: 0px;
margin-right: 0px;
}This way you will select only the mobile menu and the other will remain hidden like it should and you will be able to center the menu as you like but you will also have to center or work on the search icon also.
Thanks
Hey,
One of my favorite improvements with the latest update is the “Style 3” addition with the large top photo with an inline title.
However, I’ve just disovered that the layout leaves a huge gap, and does not show the title on mobile devices.
Screen: http://i.imgur.com/YAbD1zd.jpg
Web post for comparison: http://www.vitamail.no/featured/d-vitaminmangel-dobler-risikoen-for-demens/
I’ve tried removing all my custom CSS, in case any of it messed it up, but it does not seem to make a difference. Can you help me ut here?
The issue looks like the fact that you’re setting .sf-menu to display: block on screens smaller than 767px. The team has designed the two menus (desktop and mobile) to both exist on the page and just hide one or the other using display: none. (Not a great way to do it in terms of SEO but they say they’re working on it.) By setting sf-menu to display:block you’re forcing it to show on mobile too.
The actual mobile menu id is #td-mobile-nav — that’s the one that slides in on the side. The little toggle icon for it is td-top-mobile-toggle. Your CSS would want to affect one of those. But are you sure you want to centre the mobile menu as well? There isn’t much to centre. 🙂
Hey guys. I am using style 3 (full width logo + menu). I am also using custom CSS for centering the menu which you provided being:
.sf-menu {
display: table;
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* responsive phone */
@media (max-width: 767px) {
.sf-menu {
display: block;
float: left !important;
margin-left: 0px;
margin-right: 0px;
}I have a different logo for the desktop logo and mobile logo. The mobile logo is smaller. Now on mobile view, it is showing the desktop view logo. It is also hiding behind the transparent header of the mobile view.
What is the issue here?
Hi,
@Joe Jerde
Please try this custom css in Theme Panel > Custom CSS:
@media (max-width: 767px){
.mobile-logo-wrap img {
top: 1px !important;
height: 100%;
}
}Hope this helps!
Thanks
Yes, the advanced css is very helpful. I think I found a nice solution by using the big slider on the desktop homepage and a taller version of the regular slider on the mobile homepage.
Thanks for the help. I love all the options with this theme.
@christophersimmons:
what you understand by “graphics loading from the network portal vs localized”? As far as I know where isn’t any CDN in Germany thus we decided to server pictures from nginx ram with having in mind that this should be faster or at least comparable to cloudfront.
Fonts and Google Analytics are loaded from Google, I think this is a preset from the theme.
jQuery and Co are loaded from public CDN. I think this is faster than serving them myself since they already should be precached.
In addition to this the only thing loaded from external servers are ads and content tests. The content tests are programmed by myself and run completely async after the on page load event. For the ads we are working on a hack to load them async, however this isn’t stable yet. The only left over part is the iam.js script. which is running sync. This is the only party I’m not allowed to change, since it is used to track the germany publisher ranking. Really sucks that they only supply a synchronous script, but it should be reasonable.
I’m not that experienced in page speed optimizations yet, thus it would be interesting for me to know which part exactly makes the page load so horribly slow? And how can I figure this out? I think up to 40 sek on mobile devices is just not acceptable for clients.
How can I activate the mod_pagespeed setting to insert image dimensions and what is it doing?
And by the way thx for your awesome expertise!
Hi,
I have checked your site and I don’t think you have added the tag cloud widget right, that’s why the style doesn’t apply correctly, this is how it should look like: http://screencast.com/t/T5Q67GqH3tc
Please make sure you add the widget like this, using page builder: http://screencast.com/t/Xt7OTIhLq or like this if you add it from Appearance > Widgets in your sidebar http://screencast.com/t/g3vWxYZLSit0
Regarding the I have noticed that the logo doesn’t show up right on mobile also , please make sure you have uploaded the logo correctly from Theme Panel > Header, like this, and try again: http://screencast.com/t/SWrXem1O
If this dose not solve the issue please give us wp-access so we can check, provide the user and pass at contact@tagdiv.com, also send a link to this topic or specify this issue details.
Thanks
@Lucian,the theme is ignoring any size you set in the ad code, even if you select Smart sizing in Adsense Panel.
How I worked around this issue is by specifying the ad sizes for different viewports in the option that the theme gives.
For example, if I am using a leaderboard ad, I paste the code. Then instead of keeping resizing at auto, I set 728×90 for desktop, 320×50 for mobile and so on and so forth. That works perfectly.
In Theme Panel – Header section, upload a logo image with smaller dimensions than what you have at present for Logo (Retina). That will solve all your issues 🙂
Just so you know, I’ve already tried the margin option on the theme options and nothing worked.
Hello,
I’m also trying to change the height of the slider.
I followed the instructions in #17844, and it works for desktop but it doesn’t look right on mobile. The slider does not get smaller, so there’s a big white space between the image and title on mobile. Any ideas?
How to fix the logo on the mobile menu from being off-centered? See http://gadgism.com from mobile.
No prob. As I think I said, I spent an entire month (January 2014) messing with this stuff, and a mix of Amazon’s CDN, our new server, mod_pagespeed, etc.
I think I mentioned someplace the flaw in Google’s speed algorithm, where one of my test pages got a 91/100 with 47% of page rendering due to blocking elements; combined some files, now only have one blocking element, but less than 1% is considered able to render before loading the main CSS file, and the score went up to 97/100 for desktop and 91/100 mobile with user UX score of 85/100, and the items for the UX score are stupid.
(Test this page, which doesn’t use CDN, doesn’t use WordPress:
http://www.send2press.com/services/ez_price_list.shtml
You can drive yourself to drink with this stuff.
And the super annoying thing is the new expectation by Google for all pages to load via https, which requires SSL cert, and to possibly enably mod_SPDY on server since https is inherently slower than http. But … that’s another story, and the one I’m suffering with now. (Sigh.)
Hi Cherry
you might want to keep ONE thread, vs starting three or more regarding your site and pagespeed. Basically if you get all the things updated already covered in your other two threads, then mobile speed will also increase.
Again, as I’ve noted previously, you can’t do anything about the external ads being served which impact speed. Not sure how you’re loading ads on a demo site anyway, frankly. You should turn ads OFF for testing your “actual” speed. So the “errors” for mobile for the javascript and images from Google ads and advertisement browser caching, are impacting your score but nothing you can address and are false positives vis a vis the site and theme.
You *can* minify the main .css file which is showing as NOT minfied, as we’ve already covered in your prior threads.
Minifying http://cherrykoks.de/…ntent/themes/Newspaper/style.css?ver=4.1 could save 7.1KiB (16% reduction) after compression.
And basically don’t use contact form 7 unless you actually need it. Since you don’t have a live site, why would you need somebody to contact you anyway at this stage of your playing with the theme and setup without actual content. If you’re planning to use that, then you could presumably add its css to bottom of the main style.css, then hack the plugin to not write its own CSS into the head of the theme; or this would be example of where — as you’d asked elsewhere — you would add the plugin to the speedbooster plugin code to get it dumped at bottom of theme and optimized.
And remember best to test a post page for score not home page, since most people do NOT land on a site home page, but “surf in” to content from a social media link/share, or search result page, etc. — home page will always be a trickier prospect since it’s not indicative of the rest of the site, using sliders, modules, more photos, ajax loads, etc.
Also be aware you cannot get a 100/100 score with a WordPress site running numerous photos, plugins, ads, social media hooks, etc. Only people who have accomplished this have done custom sites without images, using CDN, and custom coding to maximize above the fold content load separate from below the fold content.
If you get above 80 on mobile and above 90 on desktop, you can really get on with your life and worry about content and marketing.
Has anyone a suggestion for better Mobile Speed?
https://developers.google.com/speed/pagespeed/insights/?url=cherrykoks.de
already minified these- and still not good enough – on desktop it’s “acceptable”
http://gtmetrix.com/reports/cherrykoks.de/MAxHG3vb
Was thinkin’ about to combine the 3 css files into 1 – (p.e everything in stylesheet.css) but don’t know how where to change the “calls” for html. (which file and which code there? )
Is it useful to combine? The internet community is torn about that issue.
If you want to hard code the number of posts shown on a category page and not use the built in function of wordpress, you “might” be able to use visual composer for that but I’ve not done that, or you’d need to modify the category template and manually specify the loop (if you have no idea how to do that, you might need to hire a developer).
Obviously if you only want to show 10 items on the category pages, you would set that from the wordpresss > reading function you’ve already used. 20 is a common number to use, however, and works fine on most websites. Some people do less, some people do more. If your main audience is mobile, obviously 10 is a good number.
Since that function impacts the category pages, you’d then use the visual composer to layout your home page and not be impacted by the “10” settings.
In other words, easier to layout the home page with the theme features, than hack the template for the category pages.
