How to add the Electrical Safety First Socket Overload Calculator to your website and keep it mobile friendly
The Electrical Safety First Socket Overload calculator is a fantastic tool and I would highly recommend adding it to your own website. You can display the socket calculator by going to the Electrical safety First webpage HERE to grab the embed code. There is just one catch! If you add this code alone the calculator will not be mobile friendly so people visiting your website from a mobile device will find it hard work to use and most likely give up.
To make the socket calculator both desktop and mobile friendly I have created a small piece of code that you can add to your style sheet or directly into your full html editor on your website.
To embed the calculator use this piece of html code:
<iframe class="socket-calculator" scrolling="no" src="https://www.twothirtyvolts.org.uk/socket-overload/" </iframe>To add the styling so that the calculator becomes mobile friendly you can do this in two ways:
1: Add the style code directly to your style sheet
2: Add the code within your html editor
The style code is:
@media (max-width: 740px) {
.socket-calculator-wrapper {
max-width: 100%;
overflow: hidden;
}
}
@media (max-width: 740px) {
.socket-calculator {
transform-origin: left top;
transform: scale(.6);
margin-bottom: -220px !important;
}
}
@media (max-width: 740px) {
.socket-calculator {
margin: 0px;
width: 700px;
height: 500px;
border: 1px solid #373e46;
padding: 0;
overflow: hidden;
margin-bottom: 0px !important;
}
}
@media (min-width: 740px) {
.socket-calculator {
margin: 0px;
width: 100%;
height: 500px;
border: 1px solid #373e46;
padding: 0;
overflow: hidden;
margin-bottom: 0px !important;
}
}