WordPress.org

Ready to get started?Download WordPress

Forums

2011 child theme not resizing properly on iphone/ipad (4 posts)

  1. colleen713
    Member
    Posted 2 years ago #

    This site uses a child theme of 2011. http://www.nancylcohen.com
    Unfortunately, the design of the site changed a lot after I had created it, and this probably wasn't the best theme to start from. I ended up removing most of the responsive styles, so that the site wouldn't resize. Now when I load it on the iphone or ipad, the site will scale down to fit on the screen, but the right half of the page is covered/white. Has anyone encountered anything like this before? I have no idea what would be causing this.

    Thanks!

    Here's a link to the stylesheet

  2. jstraete
    Member
    Posted 2 years ago #

    I am having a similar problem and would greatly appreciate any advice from someone who can help. I have two sites using a child theme of 2011:

    http://www.newhollandrochester.com/blog
    http://www.fcyla.com/fcyla/blog

    Both sites appear just fine on IE, Firefox, Safari on laptops / computer monitors. However, on the iPhone, it appears as though the div #secondary (which contains the widgets on the right) gets pushed under the div #content (which contains the posts).

    It seems this is because there isn't enough room for the two to float next to each other (#secondary is set to float:right on the stylesheet). I've tried to change the default width's from the %s to px sizes and make it fit that way, and it still doesn't seem to work.

    I tried searching for other people who have had this issue and this is the only post I could find which kind of shocked me, because I figured this would be a common problem people were having. If anyone could help, I would greatly appreciate it. Here are the links to the stylesheets:

    http://www.newhollandrochester.com/blog/wp-content/themes/nhr/style.css
    http://www.fcyla.org/blog/wp-content/themes/fcyla/style.css

  3. jstraete
    Member
    Posted 2 years ago #

    Well, I figured out what my issue was. It took a couple of things for me to get it to display correctly:

    1. Remove the code in the stylesheet from:

    /* =Responsive Structure
    ----------------------------------------------- */

    up until

    /* =Print
    ----------------------------------------------- */

    2. I needed to specify my width where the background property is in the #page div in the Global section and not just in the Structure section. I hope this helps you colleen and anyone else who happens to come across this.

  4. mafkes
    Member
    Posted 1 year ago #

    jstraete

    Thanks you helped me as i was also having the same problem but only with iphone display.

    I went and added a width to the background of 1000px that fixed the iphone display problem but the ipad display shifted to the right so i changed it to 100% instead of 1000px. the ipad display shifted back to the centre but the iphone went back to displaying a large grey section to the right.

    still working on it....

Topic Closed

This topic has been closed to new replies.

About this Topic