[Support request] Inject HTML to frontpage

[Hans]

I know: What I do is not best practice but it is the most simple way to fullfil the job.

I use page hero to inject the following HTML code:

<div class="container"><div><div><div class="hellerbg"><div style="margin:10px !important;"><div style="float: left;"><a href="http://spd-simmerath.de" rel="home"><img class="spd-logo" src="http://swimages.spd-simmerath.de//2019/03/spd_logo_simmerath-200-1.png" onload="kandimg()"></a></div><div><button class="titel-butt" onclick="location.replace('http://waehlt.spd-simmerath.de/blog/')"><h1 class="swtitel">SIMMERATH</h1><span style="font-size: 28px; line-height: 30px; color: #e3000f">sozialer - gerechter - lebenswerter</span></button></div><p class="sw-description" itemprop="description">Information zur Kommunalwahl 2020</p></div></div><div id="kandbild"></div></div></div><div><div class="aligncenter hellerbg hellerbg1">[widget id="stbez_widget-3"]</div><div class="aligncenter hellerbg hellerbg1"><h2 style="color: #e3000f;"><strong>SPD Simmerath informiert</strong></h2><p style="text-align: justify;">Mit der Kommunalwahl 2020 werden in unserer Gemeinde entscheidende Weichen gestellt. Hier stellen wir Ihnen unser Programm und unsere Kandidaten vor.</p><h2 class="widgettitle">Letzte Meldungen</h2><div style="background-color: #c0c0c0; padding-top: 5px;">[aktuelles anz="3"]</div><h2 class="widgettitle">Anstehende Termine</h2><div style="background-color: #c0c0c0; padding-top: 5px;">[termine anz="3"]</div><button style="margin: 7px; padding: 7px" onclick="sw_button('blog/')">Meldungen</button><button style="margin: 7px; padding: 7px" onclick="sw_button('termine/')">Termine</button><button style="margin: 7px; padding: 7px" onclick="sw_button('wahlprogramme/')">Wahlprogramme</button><br><button style="margin: 7px; padding: 7px" onclick="sw_button('background/')">Hintergrundbilder</button><button style="margin: 7px; padding: 7px" onclick="sw_button('stbez-image/')">Bilder Stimmbezirke</button></div></div></div><noscript> <h2 style="color: red">Leider haben Sie Javascript deaktiviert. Sie können diese Seite nur sehr eingeschränkt nutzen.</h2></noscript>

It works perfect as you may see on this image:

Unfortunately it doesn’t work if the window gets smaller:

All trials to inject this HTML via a hook (in the content area) did not succeed. Is there a way to make it possible. I think it is not so easy to do it without HTML.

[Leo]

Hi there,

Unfortunately it’s literally impossible to make it responsive with this much HTML inline style.

I really don’t see a good solution other than re-doing the whole thing to use classes and CSS.

[Author]

Posts