Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 14, 2016 at 5:07 am #87412
    husker
    Participant

    I noticed the images are not sized the same across a table row when viewing portrait Iphone or Ipad view.

    http://bayareahuskers.org/wp/2015-past-events/

    http://bayareahuskers.org/wp/past-events/

    Is there a way to change media view for this?

    Brian

    March 14, 2016 at 10:27 am #87424
    Mahesh
    Participant

    @husker: You are using image with different sizes that is why you are facing the issue. Please use the images with same resolutions in the table.

    Regards,
    Mahesh

    March 14, 2016 at 10:39 am #87425
    husker
    Participant

    HI Mahesh,

    No that’s not the issue.

    I created a test page with the same image used 4 times,

    Check out the IPhone Portrait?

    http://bayareahuskers.org/wp/test-image/

    Brian

    March 14, 2016 at 11:07 am #87428
    Mahesh
    Participant

    @husker: I don’t know why but padding in <td> tag is causing the issue, using following CSS fixed the issue for you test-image page:

    table td:nth-child(4n+4), table td:nth-child(4n+1) {
	width: 40%;
}

    Let me know if this helps.

    Regards,
    Mahesh

    March 14, 2016 at 8:52 pm #87469
    husker
    Participant

    Hi Mahesh,

    It did correct the page with 3 columns but it had no effect on 2 column table. That explains why the original page above I mentioned was not working right. http://bayareahuskers.org/wp/2015-past-events/

    I created a test page with 4 equally sized images and you can see what happens. Images are not proportional in landscape mode or portrait mode on Ipad or Iphone.

    http://bayareahuskers.org/wp/2015-past-events1/

    March 15, 2016 at 10:40 am #87501
    Mahesh
    Participant

    @husker: Its kind of a strange issue. And is only seem to be visible in iphone portrait version. We are working on it. We’ll let you know once its fixed.

    Regards,
    Mahesh

    March 15, 2016 at 11:25 am #87511
    husker
    Participant

    Hi Mahesh,

    I am also going to insert new tables and make sure images that are inserted are same size in each row and see if that helps as well.

    Brian

    March 15, 2016 at 1:20 pm #87524
    Mahesh
    Participant

    @husker: I tried the your content (table and images) with Catch Responsive theme, and using the following CSS fixed the issue

    table td {
    width: 50%;
}

    I think the issue is because of the CSS in child theme, seems you’ve modified a lot of CSS in child theme, please try the same with the parent theme (and Custom CSS I’ve used) and let me know if the issue persists with parent theme.

    Regards,
    Mahesh

    March 15, 2016 at 11:52 pm #87566
    husker
    Participant

    Hi Mahesh.

    Is it more than my Custom CSS.

    If I use Parent Theme and no Custom CSS, 3 td tables work except for Iphone6 portrait. The right image is smaller. I tried http://bayareahuskers.org/wp/test-image/

    2 td tables work fine in all modes -I used http://bayareahuskers.org/wp/2015-past-events1/

    Then i added the code above to Custom CSS and did the same test.

    3 td table – http://bayareahuskers.org/wp/test-image/ does not work on cpmputer, ipad or iphone6

    2 td table – http://bayareahuskers.org/wp/2015-past-events1/ This page wprks on all devices.

    So as you can see there is something in parent theme coding that is not right for tables.

    If I look at my child theme and use the table td code. The 2 td table works fine everywhere. The 3 td table creates a very small image for all devicces and does not work.

    If i look at my child theme and take out td code. The 2 td table is no good anywhere. The right image is always larger on any device. The 3 td table is not right either. Right images are somewhat larger.

    I would come to a conclusion that Iphone Portrait code needs tweaking in parent theme and not by using the table td code above.

    Let me know I can help further.

    Brian

    March 16, 2016 at 6:07 am #87579
    husker
    Participant

    Hi again Mahesh. I found a workaround until you find a fix for the code.

    I have the parent theme up currently so you can see all the test pages.

    http://bayareahuskers.org/wp/test-image2/ – I put 3 images in a row and took out text and all images are correct size on devices.

    http://bayareahuskers.org/wp/test-image-3/ – I out text back in center td and it does not size right image correctly.

    http://bayareahuskers.org/wp/test-image/ – Here i left the text but defined a cell width for both and you can see that the two images are sized correctly on all devices.

    I have not tried the child theme side yet, but wanted you to see this first.

    Check it out.

    Brian

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Images in Portrait IPhone and Ipad Mode’ is closed to new replies.