WordPress.org

Ready to get started?Download WordPress

Forums

how to make site ipad friendly (17 posts)

  1. goldmember
    Member
    Posted 2 years ago #

    when this site is viewed on an ipad, the alignment is all out of whack.

    See screenshot here

    what’s the best way to make everything align appropriately on the ipad?

    please advise. thanks in advance!

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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.

  3. goldmember
    Member
    Posted 2 years ago #

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

  4. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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.

  5. goldmember
    Member
    Posted 2 years ago #

    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?

  6. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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;
    }
  7. Skytouch
    Member
    Posted 2 years ago #

    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

  8. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

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

  9. Skytouch
    Member
    Posted 2 years ago #

    Sorry, will do.

  10. goldmember
    Member
    Posted 2 years ago #

    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?

  11. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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.

  12. goldmember
    Member
    Posted 2 years ago #

    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?

  13. goldmember
    Member
    Posted 2 years ago #

    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!

  14. vidyab
    Member
    Posted 2 years ago #

    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

  15. vidyab
    Member
    Posted 2 years ago #

    - 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.

  16. TimoElshof
    Member
    Posted 1 year ago #

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

  17. TimoElshof
    Member
    Posted 1 year ago #

    Already sorted out the problem with the navigation bar, it was caused by adding text in the menu bar. Now I have to deal with the comprehensive Google plug in.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags