[husker]

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

[Mahesh]

@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

[husker]

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

[Mahesh]

@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

[husker]

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/

[Mahesh]

@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

[husker]

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

[Mahesh]

@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

[husker]

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

[husker]

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