I'm trying to use the iNaturalist widget using free elementor. I've placed the code in an HTML element which doesn't resolve the widget well. It seems to pull from the global colors that I've picked which I would like but all the boundry lines are off. Making elements to overlap one another. I have tried messing with some code but I don't know what I'm doing. Changing the size of things seems to have no effect and If I could turn off the color of just bountry lines that would solve my issues I suppose. One other weird thing is that the widget won't resolve at all in the preview window but once published it does resolve but with the issues already mentioned.
Any help would be greatly apprecated.
Things I wish I could change from most important to least important:
- Change the color of the outlines
- Make the photos larger
- Change the font to atkinson hyperlegible
- Change the layout of the elemets so nothing overlaps
<style type="text/css" media="screen">
.inat-widget { font-family: Georgia, serif; padding: 10px; line-height: 1;}
.inat-widget-header {margin-bottom: 10px;}
.inat-widget td {vertical-align: top; padding-bottom: 10px;}
.inat-label { color: #888; }
.inat-meta { font-size: smaller; margin-top: 3px; line-height: 1.2;}
.inat-observation-body, .inat-user-body { padding-left: 10px; }
.inat-observation-image {text-align: center;}
.inat-observation-image, .inat-user-image { width: 88px; display: inline-block; }
.inat-observation-image img, .inat-user-image img { max-width: 88px; }
.inat-observation-image img { vertical-align: middle; }
.inat-widget-small .inat-observation-image { display:block; float: left; margin: 0 3px 3px 0; height:88px;}
.inat-label, .inat-value, .inat-user { font-family: "Trebuchet MS", Arial, sans-serif; }
.inat-user-body {vertical-align: middle;}
.inat-widget td.inat-user-body {vertical-align: middle;}
.inat-widget .inat-footer td.inat-value {vertical-align: middle; padding-left: 10px;}
</style>
<div class="inat-widget">
<div class="inat-widget-header">
<a href="https://www.inaturalist.org"><img alt="iNaturalist" src="https://www.inaturalist.org/assets/logo-small.gif" /></a>
</div>
<script type="text/javascript" charset="utf-8" src="https://www.inaturalist.org/observations/project/219105.widget?layout=large&limit=10&order=desc&order_by=observed_on"></script>
<table class="inat-footer">
<tr class="inat-user">
<td class="inat-value">
<strong>
<a rel="nofollow" href="https://www.inaturalist.org/projects/friends-of-san-pedro-valley-park">More observations at San Pedro Valley County Park on <nobr>iNaturalist »</nobr></a>
</strong>
</td>
</tr>
</table>
</div>