Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #25414

    There are two different problems I need to fix which involve the displays on my mobile phones (Samsung Galaxy and Galaxy SII).

    1. On the SGSII, the Mini Content H1 headline is missing when first loading the site. But it DOES display the H1 headline if I click “hide sidebar & content”, then click the Home icon “#return_content on this page”. Following that, if I click the Home button on the Main Menu again, the headline disappears.

    Here is the site URL: http://pinktiki.com

    The custom Headline Font is Kreon.

    Viewing the Flashlight Demo on the SGSII everything displays properly using the default font. As a test on my website, I changed the custom Headline Font to the default (no custom font) and the headline displays properly in the Mini Content Area.

    2. On the SGS, the Kreon font works everywhere, even in the Mini Content Area. The problem on this mobile device is the Main Menu is not aligned under the logo in the sidebar. The HOME button starts where the Social Icons are vertically.

    I have customized the CSS in the sidebar area. Here is the code from my custom.css:

    ______________________________________________

    /* position logo left & move up */
    .logo {
    top: -14px;
    left: 0px;
    float: left;
    height: 124px;
    width: 217px;
    position: relative;
    display: block;
    }

    .main_menu {
    top: 25%;
    }

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
    .responsive #top #main .sidebar {display:block !important; clear: both; }
    }

    /* change color of sidebar box #top .sidebar .box
    .sidebar.sidebar_absolute .inner_sidebar {
    background-color: #FFFFFF;
    background-image: none;
    }*/

    .sidebar.sidebar_absolute .inner_sidebar{
    position: absolute;
    display: block;
    }

    /* add pattern sidebar box #top .box */
    #top #main .sidebar{
    background: rgba(255, 255, 255, 0.51);
    background-image: url(http://pinktiki.com/wp-content/uploads/2013/05/pat-tapa.png);
    background-repeat: repeat-y;
    background-position: 0px 0px;
    }

    /* make headline font size smaller on mini content */
    #top .entry-mini h1.post-title {
    font-size: 24px; !important;
    }

    ______________________________________________

    Please advise if the custom.css has any problems which would cause the Android displays to fail. Everything displays correctly on my computer browsers.

    THANKS!

    #126887

    Hi themefranc,

    You could try disabling the cufon font choice and using a plugin that will pull in a google font instead. My guess is that cufon isn’t supported on some of the mobile devices but its use has been somewhat phased out with newer techniques (like google font).

    For the second issue, I’m not getting the same results or issues when trying to test in either emulators or my personal android OS phone (also an S2).

    Regards,

    Devin

    #126888

    HI Devin,

    Thanks for the advice which I will implement and let you know if it works.

    There is a weird thing happening on the S2. When I first load the URL, the Mini Content Area displays the box in the lower right corner and will briefly display showing the Kreon font H1 headline. Then it repositions the box at the top (next to the sidebar) and the headline disappears. So it does display the Cufon font for a half-second, then hides it.

    I also tried the emulators and it does not display any problems… looks exactly as displayed on my browsers.

    What do you think? Does your S2 show the same thing?

    #126889

    Hi,

    Unfortunately I dont own either of those phones. So just the headline ”Welcome to PikeTike” is not showing up while the text below it shows up and white background?

    Getting rid of the cufon may be not a bad idea since it will look like this with the same font you are using, but of course you can pick something else from google fonts -> http://www.clipular.com/c?8990029=980vw25THFdCfUjVGdv1DogckM8&f=.png

    You are aware that this theme is not responsive? The fact that only 1 line disappears and only while using an obscure font is amazing in itself. I would consider a work around such as removing the cufon.

    Thanks,

    Nick

    #126890

    Hi,

    I installed the WP Google Fonts plugin and used the Bitter Google Font for all the headlines. They display correctly on the Mini Content Area and every page headlines on both Samsung Galaxy and Galaxy SII. That problem is solved… thank you for the suggestion.

    Pinktiki.com still has the Main Menu vertical alignment issue on the SGS. I understand that the Flashlight theme is not responsive, but your demo displays correctly on both SGS and SGSII phones.

    This is the site that I am viewing which works on all browsers and Android phones:

    http://www.kriesi.at/themedemo/?theme=flashlight

    Can you check my CSS to see if there is any reason why it would cause the Menu to start vertically where the social icons are?

    _________________________________________________________________________

    /* position logo left & move up */
    .logo {
    top: -14px;
    left: 0px;
    float: left;
    height: 124px;
    width: 217px;
    position: relative;
    display: block;
    }

    /* position space above logo */
    .main_menu {
    top: 25%;
    }

    /* Change menu font */
    #menu-main-menu {
    font-family: 'Bitter', serif;
    background-color: #FFFFFF;
    }

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
    .responsive #top #main .sidebar {display:block !important; clear: both; }
    }

    /* add pattern sidebar box #top .box */
    #top #main .sidebar{
    background: rgba(255, 255, 255, 0.51);
    background-image: url(http://pinktiki.com/wp-content/uploads/2013/05/pat-tapa.png);
    background-repeat: repeat-y;
    background-position: 0px 0px;
    }

    ____________________________________________________________________

    Thanks again!

    #126891

    Hi,

    Is your website up? I am unable to connect to it twice now.

    Thanks,

    Nick

    #126892

    Hi,

    Yes it is… I just tried and it works.

    #126893

    Hi,

    THere is something wrong with your host/server. Its either overloaded or mysql server is not working correctly. You have 4-6 seconds in ttfb time to first byte. when normally it should be 1/4 of a second. So your page takes 8-9 seconds to load instead of 2.5 seconds. http://www.clipular.com/c?9527029=0x7lFemaz_mqk1IhqBXBmglozCs&f=.png Google will give you a big penalty (as much as if you copied someone elses content word for word) for having a slow site. http://gtmetrix.com/reports/pinktiki.com/FxZynLo9


    The only difference between your site and the demo is the way you have the vertical column configed differs. THe demo has no social media and thus the column is a single unit, while your breaks between the forward/backward buttons on the bottom piece and the social media on the top piece. There are settings in Flashlight > Theme Options to change this configuration.

    Thanks,

    Nick

    #126894

    Thank you for the GTmetrix recommendations. I have improved the performance and my grades are in the A & B range. ( http://gtmetrix.com/reports/www.pinktiki.com/wpS9QD8u ). I still have to install the W3 Total Cache when I finalize the content so I expect to gain more speed.

    —————————

    Help me but I am blind… I don’t see the difference with the Flashlight Demo ( http://www.kriesi.at/themedemo/?theme=flashlight ) and the configuration of the vertical menu column on my site. They both have the Social Media icons and the animation works the same. The Theme Option Settings only change the links to the Social Icons and I don’t see what setting to control where they break.

    —————————

    As a test, I reverted back the the original Flashlight logo, removed all Custom CSS and created a Test Menu. Everything displayed correctly on the SGS phone. Then I added my logo and the CSS to add the background pattern. It worked for an hour on the SGS with my new logo and menu, then the menu dropped down vertically (same problem as before). I just can’t seem to get it to work. I thought the problem maybe my logo was 217 pixels (which is wider than the original Flashlight logo). I added this code:

    #top .bg-logo, #top .bg-logo a{

    text-indent: -9999px;

    height: 124px;

    width:217px;

    }

    Do you have any other suggestions?

    Thanks so much!

    #126895

    Hi,

    Very nice optimization. Makes a world of a difference.

    —-

    Do this. To prevent the phone’s cache from activating, create 6 versions of the same page and add a piece of your css to custom.css file in each version so version1 page , you just add very first css block and check phone, then version2 page you will add a second block of css and do this all using the theme logo. in my opinion its possible this is the problem

    .main_menu {
    top: 25%;
    }

    though as i said i would test them all and since there are not many custom css blocks, it should take less than 20 mins to discover the miscreant and eliminate it.

    Thanks,

    Nick

    #126896

    BRILLIANT! You identified the exact problem.

    I removed that code and it works… thanks so much for all your help!

    #126897

    Lucky guess ;) Enjoy the theme!

    Thanks,

    Nick

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Android display problem with mini content H1 and main menu alignment’ is closed to new replies.