Image with caption didn't resize (bug?)

esafaree1

New Member
I just notice that when a post inside my feed have image with caption, that particular image wont resize to fit the screen unlike any image without caption. Could this be a bug? or is it related to my own feed? @appyet

Screenshot_2015-07-04-06-41.jpg Screenshot_2015-07-04-06-25-17.png
 
Last edited:

appyet

Support Team Member
Staff member
Try to force resizing of all images using css code

Code:
<style type="text/css">
.appyet_article img {max-width:100%; width:100%; height:auto; margin:auto;}
</style>
Following are existing styles, applied by AppYet before extra header is appiled.
Code:
img {display:block; width: auto !important; height: auto !important; max-width: 100%; padding:0px !important; margin-left:0px !important; margin-right:0px !important; margin-top:0px !important; margin-bottom:0px !important}
 

joseph raphael

Well-Known Member
Following are existing styles, applied by AppYet before extra header is appiled.
Code:
img {display:block; width: auto !important; height: auto !important; max-width: 100%; padding:0px !important; margin-left:0px !important; margin-right:0px !important; margin-top:0px !important; margin-bottom:0px !important}

Then why it doesn't apply on his feed's images ?
 

joseph raphael

Well-Known Member
there must be something new in RSS content that the existing CSS aren't able to resize it. will have to look into it

I figure out the problem, it's on his RSS code. The code force a specific width for the div that contains the image

Code:
<div id="attachment_11034" style="width: 769px" class="wp-caption aligncenter"><a href="http://munsyeed.com/malay/2015/04/gambar-konsert-opick-live-acoustic-di-dewan-auditorium-mbsa/konsertopick-fedtri-yahya/"><img class="wp-image-11034" src="http://i0.wp.com/munsyeed.com/malay/wp-content/uploads/2015/04/konsertopick-fedtri-yahya.jpg?resize=759%2C502" alt="konsertopick fedtri yahya" data-recalc-dims="1"></a>
<p class="wp-caption-text">Ahmad Fedtri Yahya selaku pengacara konsert.</p>
</div>

So, this is not a general problem, it's just bad coding.
 

esafaree1

New Member
I figure out the problem, it's on his RSS code. The code force a specific width for the div that contains the image

Code:
<div id="attachment_11034" style="width: 769px" class="wp-caption aligncenter"><a href="http://munsyeed.com/malay/2015/04/gambar-konsert-opick-live-acoustic-di-dewan-auditorium-mbsa/konsertopick-fedtri-yahya/"><img class="wp-image-11034" src="http://i0.wp.com/munsyeed.com/malay/wp-content/uploads/2015/04/konsertopick-fedtri-yahya.jpg?resize=759%2C502" alt="konsertopick fedtri yahya" data-recalc-dims="1"></a>
<p class="wp-caption-text">Ahmad Fedtri Yahya selaku pengacara konsert.</p>
</div>

So, this is not a general problem, it's just bad coding.
ahah! That could be it. Let me check and confirm this first.
 

appyet

Support Team Member
Staff member
Sin
I figure out the problem, it's on his RSS code. The code force a specific width for the div that contains the image

Code:
<div id="attachment_11034" style="width: 769px" class="wp-caption aligncenter"><a href="http://munsyeed.com/malay/2015/04/gambar-konsert-opick-live-acoustic-di-dewan-auditorium-mbsa/konsertopick-fedtri-yahya/"><img class="wp-image-11034" src="http://i0.wp.com/munsyeed.com/malay/wp-content/uploads/2015/04/konsertopick-fedtri-yahya.jpg?resize=759%2C502" alt="konsertopick fedtri yahya" data-recalc-dims="1"></a>
<p class="wp-caption-text">Ahmad Fedtri Yahya selaku pengacara konsert.</p>
</div>

So, this is not a general problem, it's just bad coding.
Is this a WordPress auto generated RSS?
 

esafaree1

New Member
Remove the <div></div> that contains the images along with the <a>link</a> too.

AppYet already opens the images in a native photo viewer.

There's no <div> at my end.

This the code for image with caption on my wordpress post
Code:
[caption id="attachment_11034" align="aligncenter" width="1000"]<a href="http://munsyeed.com/malay/2015/04/gambar-konsert-opick-live-acoustic-di-dewan-auditorium-mbsa/konsertopick-fedtri-yahya/"><img class="wp-image-11034 size-full" src="http://munsyeed.com/malay/wp-content/uploads/2015/04/konsertopick-fedtri-yahya.jpg" alt="konsertopick fedtri yahya" width="1000" height="662" /></a> Ahmad Fedtri Yahya selaku pengacara konsert.[/caption]

And this is the code for image without caption
Code:
<a href="http://munsyeed.com/malay/2015/04/gambar-konsert-opick-live-acoustic-di-dewan-auditorium-mbsa/konsertopick-2/"><img class="aligncenter wp-image-11010" src="http://munsyeed.com/malay/wp-content/uploads/2015/04/konsertopick-2.jpg" alt="konsertopick (2)" width="759" height="503" /></a>

still wondering what is the real problem.
 

joseph raphael

Well-Known Member
There's no <div> at my end.

This the code for image with caption on my wordpress post
Code:
[caption id="attachment_11034" align="aligncenter" width="1000"]<a href="http://munsyeed.com/malay/2015/04/gambar-konsert-opick-live-acoustic-di-dewan-auditorium-mbsa/konsertopick-fedtri-yahya/"><img class="wp-image-11034 size-full" src="http://munsyeed.com/malay/wp-content/uploads/2015/04/konsertopick-fedtri-yahya.jpg" alt="konsertopick fedtri yahya" width="1000" height="662" /></a> Ahmad Fedtri Yahya selaku pengacara konsert.[/caption]

And this is the code for image without caption
Code:
<a href="http://munsyeed.com/malay/2015/04/gambar-konsert-opick-live-acoustic-di-dewan-auditorium-mbsa/konsertopick-2/"><img class="aligncenter wp-image-11010" src="http://munsyeed.com/malay/wp-content/uploads/2015/04/konsertopick-2.jpg" alt="konsertopick (2)" width="759" height="503" /></a>

still wondering what is the real problem.

Provide an xml version of your RSS feed and I will help you.
 
Top