WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven shrinkage on iPad (8 posts)

  1. warwickhastie
    Member
    Posted 2 years ago #

    I'm using the Twenty Eleven theme for http://www.craigglassonsmashrepairs.com.au.
    When you look at the site on micro-devices it is shrinking the site so that there is still a background. What do you change so that the "body" of the website fills up the whole screen on an ipad, and micro-devices when it opens.

    Also I am using "vSlider - Image slider plugin" on a number of pages and when I open the site on an ipad, vSlider is at 100%, but the Twenty Eleven template isn't and the vSlider is shooting out to the right.

    Any help greatly appreciated?

    Thanks
    Waz

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. Create a child theme for your changes. Or make your customised version in a new theme and re-upload a fresh copy of Twenty Eleven.
    http://wordpress.org/extend/themes/twentyeleven

  3. warwickhastie
    Member
    Posted 2 years ago #

    Hi Esmi
    I have now created a child theme and every thing is working fine on the child theme.

    Do you know the answer to my question?

    Thanks
    Warwick

  4. Mr. Vibe
    Member
    Posted 2 years ago #

    Hi Warwickhastle,

    This is because twentyelven wordpress theme is responsive whereas vslider is not. This is very important feedback and will try to include in vslider future upgrades.
    Thanks for pointing it out.

    ( v )

  5. billabong74
    Member
    Posted 2 years ago #

    Hi,

    is there a solution yet?

    Jan

  6. billabong74
    Member
    Posted 2 years ago #

    I seem to be able to resolve the problem with replacing the width "1000px" in the following code with "100%".

    The problem is it only works temporarily in "FIREBUG"....as I cant find that line of code in the css / php files anywhere. Been searching and searching...but no success. :-(

    Any hints on where to find that code?

    <div id="header" style="background-image: url("http://www.travelocals.com/wp-content/plugins/vslider/timthumb.php?src=http%3A%2F%2Fwww.travelocals.com%2Fwp-content%2Fuploads%2FTRAVELOCALS-Inkscape_WORDPRESS_Header-Logo_klein.png&w=1000&h=288&zc=1&q=80"); width: 1000px (REPLACE THIS WITH WIDTH 100%); height: 288px; position: relative; background-position: left top;">

  7. billabong74
    Member
    Posted 2 years ago #

    hey...came across a solution...

    http://www.vibethemes.com/march-2012-freebie-a-responsive-wordpress-slider-plugin-vflexslider

    They seem to have created a temporary version of vSlider - called vFlexslider - which is responsive and can be used until they update the main vSlider plugin.

    vFlexslider is also touch-responsive on iPhones and iPads.

    Flexslider works just about the same way as does vSlider.

    One major difference (I noticed) is that you need to size the pictures you want to show to the exact size you want/need them as the program doesn't crop them (vSlider does; vFlexslider does not!).

    Here is the code I am using which makes it possible to show different sliders on different pages / it needs to be placed into the header.php:

    <?php if(function_exists('vflexslider'))
         {
              if(is_front_page() )  {
                                              vflexslider('main');
             }else if(is_page( 'enter_wordpress_page_number' ) ){
                                            vflexslider('slider_name_1');
             }else if(is_page( 'enter_wordpress_page_numer' ) ){
                                            vflexslider('slider_name_2');
             }else if(is_page( 'enter_wordpress_page_numer' ) ){
                                            vflexslider('slider_name_3');
             }else if(is_page( 'enter_wordpress_page_numer' ) ){
                                            vflexslider('slider_name_X');
             }else {
                                              vflexslider('main');
                }
    
            } ?>

    [Moderator Note: Please post code or markup snippets between backticks or use the code button.]

    In brackets are the names of the sliders (created within the plugin).

    That exact same code can be used for vSlider when they have finished updating it. You just exchange ALL the references to 'vflexslider' for 'vslider' in the code. Done!

    Hope its of any use!

  8. ingharic
    Member
    Posted 1 year ago #

    Hi
    I am having problems with http://www.global-migrate.com/taimur/ looking different using mobile devices such as iPad and iPhone. The menu on the left goes to the bottom of the screen. Does anybody have any ideas?

    Regards

    Richard

Topic Closed

This topic has been closed to new replies.

About this Topic