WordPress.org

Support

Support » Themes and Templates » how to make site ipad friendly

how to make site ipad friendly

Viewing 15 replies - 1 through 15 (of 16 total)
  • Moderator Michael

    @alchymyth

    i couldn’t open the screenshot; however, viewing the site while narrowing the browser width shows some display problems;

    twenty eleven has the ‘responsive’ style section in the lower part of style.css; you might need to compensate some of these to allow for your design idea on the narrower screen of an ipad.

    there are also some display problems problems in IE7 screenshot.

    however, all this is more a css problem than a wordpress issue.

    thanks. can you elaborate a little on the “responsive” style and how I would compensate?

    Moderator Michael

    @alchymyth

    have a look into style.css of Twenty Eleven:

    from line 2237:

    /* =Responsive Structure
    ----------------------------------------------- */
    
    @media (max-width: 800px) {
    ...

    these styles are loaded if the browser window is less than the width in the styles.

    if you look at the styles that follow these lines, you can see that some formatting is more-or-less changed/adapted for the narrower screen; often just margins, or widths; or the sidebar is positioned off screen, etc.

    lower down, for even narrower screens:

    @media (max-width: 650px) {
    	/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */

    the font-sizes are adapted, etc.

    some of these lines are nicely commented to what effect they are there.

    —-
    do the experiment:
    look at a site using twenty eleven (or a child theme) and slowly drag the browser screen to become narrower, and watch the changes – how the sidebar moves, how the footer widgets change, how the fonts get resized, etc.

    —–
    to overwrite some of these changes, add the same structure to the bottom of style.css in your child theme,and add styles as needed.

    one of the posts in my site shows an example.

    i’m starting to follow now.

    i added the following css to the bottom of my child theme’s style sheet and it got the content part to align properly:

    /* IPAD FIXES */
     @media (max-width: 960px) {
    /* Simplify the basic layout */
    #main #content {margin: 2em auto;}
    
     @media (max-width: 960px) {
    /* @media (max-width: 960px) Reduce font-sizes for better readability on smaller devices */
    body, input, textarea {}

    but i have no idea how to fix the footer area. i cant figure out which @media element effects that. any advice?

    Moderator Michael

    @alchymyth

    this might be the part:

    /* No need to float footer widgets at this size */
    	#colophon #supplementary .widget-area {
    		float: none;
    		margin-right: 0;
    		width: auto;
    	}

    to compensate, possibly add this to your responsive styles:

    #colophon #supplementary .widget-area {
    	float: left;
    }

    Here’s my dilemma. I am able to change the following code in the 2011 Parent Theme from this:

    /* One column */
    .one-column #page { max-width: 690px; }

    to this:

    /* One column */
    .one-column #page { max-width: 998px; }

    The width for my fullscreen one-column pages expands as expected. But when I simply paste just this into my Child Theme:

    /* One column */
    .one-column #page { max-width: 998px; }

    the full-screen one-column pages no longer expands. In other words, I am able to edit the Parent style.css, but editing the Child style.css does not properly override the parent. What other code do I need to duplicate from the Parent to Child to make this work?

    Thanks,
    Sky

    Moderator Michael

    @alchymyth

    @skytouch
    please start a new topic; and post a link to your site.

    Sorry, will do.

    alcymyth, so would i add this to the style sheet?

    @media {
    #colophon #supplementary .widget-area {
    	float: left;
    }
    }

    i’m still not clear on the exact formatting of these responsive styles.

    please advise. thanks!

    additionally, what if i just removed all the @media stuff in the parent theme’s style.css? wouldnt that make all these resizing issues go away and solve my problem?

    Moderator Michael

    @alchymyth

    take the last few styles in style.css of the child theme:

    /* IPAD FIXES */
     @media (max-width: 960px) {
    /* Simplify the basic layout */
    #main #content {margin: 2em auto;}
    
     @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body {
    	padding: 0;
    }

    and fix them (make sure the curly brackets are closed); and add the new styles into the section; like so (this should replace the above section):

    /* IPAD FIXES */
    @media (max-width: 960px) {
      /* Simplify the basic layout */
      #main #content {margin: 2em auto;}
    
      #colophon #supplementary .widget-area {
    	float: left;
      }
    }
    
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      body {
    	padding: 0;
      }
    }

    ——

    additionally, what if i just removed all the @media stuff in the parent theme’s style.css? wouldnt that make all these resizing issues go away and solve my problem?

    yes, possibly – however, this would be against the idea of using a child theme;
    you might then as well make a copy ( clone ) of the theme, and save it under a new name and change the theme name in style.css – that would probably be easier.

    i’m making some progress but still having a problem with the background in the footer. for some reason it doesnt stretch all the way across the bottom.

    here’s the new screenshot

    any thoughts on how to fix?

    i’m very close to where i need to be. and thanks for bearing with me. i just have slightly farther to go (this would be so much easier if i had myself ipad!!!)

    but any idea how i can get the site to center better in the ipad? if you look at this new screenshot, you’ll see that all the text is right against the left border and there’s plenty of space along the right side. how do i shift the center of it over so it’s more balanced?

    please advise. thanks again!

    Alcymyth,
    Thanks for the code on your site ‘transformationpowertools’. I did get the sidebar back, but have a few problems & cannot figure it out. Your help would be appreciated.
    When I click on any post ( which invokes single.php template defined in my child theme) the text for the post overflows on the ipad screen.

    Thanks,
    vidyab

    – I need to add to above post & it looks like I cannot edit the above post-
    When viewed on a mobile device/Kindle, The main page of my wordpress website with all posts has no text overflowing out of the main content area. But I notice text overflow issues on pages created from the 2011 theme ‘page template’ as well as ‘single post’ template.

    None of the above doesn’t work on my site http://www.timoelshof.nl Can somebody help me?

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘how to make site ipad friendly’ is closed to new replies.