Category Archives: HTML

How to create “Tap to Sms” link


<!-- Sms scheme format -->
<a href="sms:+1-123-456-7890">Text Us!</a>

<!-- You can add Sms content as mentioned -->
<a href="sms:+1-123-456-7890?body=Request%20for%20a%20quote">Text Us!</a>
<!-- %20 is used for the space -->

How to write a superscript Registered ® in product name and page titles in CMS

Peoples are complaining that the products names or page titles which are registered trademarks. They are not shown superscript as the customer wishes them to be. They aren’t able to add <sup> tags in the titles.

You can simply add the following JavaScript snippet that replaces all occurrences of ® with ®.


<script type="text/javascript">
$('body :not(script)').contents().filter(function() {
   return this.nodeType === 3;
}).replaceWith(function() {
   return this.nodeValue.replace(/[®]/g, '<sup>$&</sup>');
});
</script>

How to create equal height columns


<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>


.row {
    display: flex;
}
.col {
    flex: 1;
}

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id nisi risus. Maecenas eu quam tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam sed dolor sit amet orci porttitor fermentum sit amet id velit. Suspendisse consectetur ornare dictum.
Vivamus a sem mollis, bibendum ante et, tempus eros. Maecenas in rutrum libero.

SVG image isn’t displaying in Chrome browser

Chrome browser doesn’t support SVG format with <img src=””> tag anymore. Peoples are facing issues that they aren’t able to see their images in Chrome browser because the images are in SVG format.
So I found a solution to display SVG image in Chrome browser with <object> tag.


<object data="/images/yourlogo.svg" type="image/svg+xml" width="100" height="100" class="mylogo"></object>

You can apply CSS rules by defining a class on the <object> tag like shown in above example.
And you can also add width and height attributes on the <object> tag.

I hope this will resolve your problem in Google Chrome Browser.