Infinity-pro: adding an image to custom html widget in the front-page-4 section

[cKBOOTH]

Hi
I have customised the front-page-4 section to include an image (rather than a font icon) and added two buttons after the text. The following seems to work OK (using local WAMP server on PC).

<div class="content-box">
<img src="http://pagebuild.test/wp-content/uploads/2018/12/ah-moy.jpg"
class="cottage-image" alt="Ah Moy two-bedroom cottage at Tin Dragon Cotages"
style="max-width: 100%; height: auto; margin-bottom: 0.5rem;">
<h4>Ah Moy</h4>
<p>Overlooking the river, this two-bedroom cottage with disabled access is suitable for two couples.</p>
<p style="color: #1e2601;font-weight:600;">From AU$340 - $480 for 2 nights</p>
<p>Book NowSee More</p>
</div>

But adding a srcset of different-sized images, seems to fail (latest version of Chrome). Only the default image is being used--even after deleting the cache and resizing my screen. When I use this code, the image appears on larger screens, but if I first load my WP site onto a small screen, there are no images displayed. Increasing the screensize sees the images appear.

<img src="http://pagebuild.test/wp-content/uploads/2018/12/settlers-hut.jpg"
class="cottage-image" alt="External view of the Settlers Hut in the bush at Tin
Dragon Cotages in Tasmania" style="max-width: 100%; height: auto;"

srcset="http://pagebuild.test/wp-content/uploads/2018/12/settlers-hut.jpg-1026x684.jpg 1026w,
http://pagebuild.test/wp-content/uploads/2018/12/settlers-hut.jpg-300x200.jpg 300w,
http://pagebuild.test/wp-content/uploads/2018/12/settlers-hut.jpg-768x512.jpg 768w,
http://pagebuild.test/wp-content/uploads/2018/12/settlers-hut.jpg 1026w">

Thank you if you can explain this, and/give me some advice!

Regards
Christine

https://www.tindragontrailcottages.com.au/

[Author]

Posts