Search bar incorrectly displayed on Opera Mini by search widget

  • Anonymous

    #6048

    I have a problem with my search bar (displayed using the WP Widget “Search” )

    The search bar displays correctly using the stock Internet browser on my phone.

    However itr displays incorrectly without any text and does not work with Opera Mini`.

    Is this easy to fix? OR can I stop the search widget from displaying on a mobile?

    I am using Android v 2.3.3 on an HTC Wildfire phone which includes a stock Internet browser v 2.3.3

    I have installed an alternative browser Opera Mini v 7.5.31657

    There is a post about using wp_is_mobile()in wordpress.stackexchange.com

    BUT I don’t really understand it and don’t know how to implement it with Graphene-mobile!

    Can someone help me? Can I use the code below? Where do I put it?

    ================================================================================

    POSSIBLE ANSWER IN POST AT:

    http://wordpress.stackexchange.com/questions/68079/how-do-i-stop-a-widget-from-displaying-on-mobile-site

    // Example

    if (

    ! wp_is_mobile()

    AND is_active_sidebar( ‘sidebar-1’ )

    ) :

    ?>

    <div id=”secondary” class=”widget-area” role=”complementary”>

    <?php dynamic_sidebar( ‘sidebar-1’ ); ?>

    </div><!– #secondary .widget-area –>

    <?php

    endif;

    Admin

    Syahir Hakim

    #33185

    What’s the URL to your site? You can remove the search widget on mobile by adding some CSS to the Custom CSS option in WP Admin > Appearance > Graphene Mobile > Display.

    Anonymous

    #33186
    Admin

    Syahir Hakim

    #33187

    I just visited your website and I don’t see any search bar other than the Graphene Mobile’s default one.

    7Rva5l.png

    Anonymous

    #33188

    When using the stock internet browser that comes with the phone, the search bar is displayed as per your example, and works OK.

    When using the Opera Mini browser, the search bar looks as per the link below and doesnt work i.e. no part of the search bar responds to being touched.

    Specimen search bar

    Admin

    Syahir Hakim

    #33189

    Hurm.. try adding this to the Graphene Mobile Custom CSS feature:

    #top-search .search-input {
    width: 55%;
    }
    .landscape #top-search .search-input {
    width: 70%;
    }

    Anonymous

    #33190

    CSS above did not work. I realised that the problem is unrelated to the search widget, as none of my widget output appears on the phone. The problem is caused by the normal search box. Graphene allows it to be turned off, Graphene mobile lacks that option.

    Can you provide better CSS? The word SEARCH still appears over other text on the screen.

    As a quick fix, I used the following inelegant custom CSS – just zeroising everything.

    #top-search {

    width: 0%;

    height: 0px;

    background: url(images/sprite-master.png) right -542px no-repeat #fff;

    clear: both;

    }

    #top-search .search-input {

    width: 0%;

    margin: 0px 0 0 0px;

    border: none;

    background: none;

    }

    .landscape #top-search .search-input {

    width: 0%;

    }

    #top-search .search-submit {

    background: none;

    border: none;

    text-transform: uppercase;

    width: 0px;

    float: right;

    text-align: center;

    margin-top: 0px;

    }

    Admin

    Syahir Hakim

    #33191

    Sites visited using Opera Mini browser goes through Opera servers that reduces the load size of the page, and in doing so apparently it changed something in the site. The misaligned search button is only one of those. The text in the site looks to have greater spacing as well.

    I see that you have removed the search bar entirely. This would be an overkill, I would say, since it works well in other mobile browsers, even Opera Mobile (which does not filter the site through Opera server when you’re on WiFi). Opera Mini users account for less than 10% of the mobile browser market share.

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

  • You must be logged in to reply to this topic.