I’ve seen some other threads talking about this issues but with no resolution. I also noticed something I did not see mentioned anywhere else. I changed the host name in my code excerpts below since this is a public forum. I can provide the info directly to support if requested.
I’m using Vantage Premium, Page Builder, and the Widgets Bundle, all newest versions as of this writing.
I inserted a feature widget into a single column page builder row.
I created 3 features and set the container size and icon size both to 125px. I set container shape to None and did not choose any icons. Instead of choose Icon images, which I’ve uploaded.
Even though I set 125px the image looks pixelated on mobile (tested Samsung S6 and S4). So, I took at look at the source code and found something strange.
1. The image size is replaced with a 150×150 version of the image, even if I specifically choose something like a 250px size.
2. The HTML appears to have an issue.
There are 3 features but look at how the HTML is created.
Excerpt from feature one HTML:
<div class="sow-icon-image" style="background-image: url(http://domain.com/wptemp/wp-content/uploads/2016/03/kelken-keligrout-icon-250px-150x150.png); font-size: 125px"></div>
Excerpt from feature two HTML:
<div class="sow-icon-image" style="background-image: url(http://domain.com/wptemp/wp-content/uploads/2016/03/kelken-keligrout-icon-250px-150x150.png); font-size: 125px; background-image: url(http://kelken.com/wptemp/wp-content/uploads/2016/03/kelkel-keligrout-101p-icon-250px-150x150.png); font-size: 125px"></div>
Excerpt from feature three HTML:
<div class="sow-icon-image" style="background-image: url(http://domain.com/wptemp/wp-content/uploads/2016/03/kelken-keligrout-icon-250px-150x150.png); font-size: 125px; background-image: url(http://kelken.com/wptemp/wp-content/uploads/2016/03/kelkel-keligrout-101p-icon-250px-150x150.png); font-size: 125px; background-image: url(http://kelken.com/wptemp/wp-content/uploads/2016/03/kelken-dowel-bar-kelipoxy-II-250px-150x150.png); font-size: 125px"></div>
Why won’t it use the image size I request? I want to provide oversize images and let the device resize, this is on purpose.
And why does the HTML keep including references to the previous feature background-image?
Thanks!
WSO
Hi WSO,
Okay so I’ve looked into this issue and I think I’ve figured it out. Thank you for being so detailed in your bug report. I promise you this will be fixed in an upcoming version. Thank you.